使用 d3 将文本添加到 svg 路径中

Add text into an svg path using d3

本文关键字：svg 路径 添加 d3 文本 使用      更新时间：2023-09-26

我环顾四周，看不出我做错了什么。我正在尝试将文本添加到如下所示的 SVG 路径

中 
<path id="pumpButton" fill="#8AB065" d="M76.2,377.1H26.5c-3.1,0-5.7-2.6-5.7-5.7v-28.3c0-3.1,2.6-5.7,5.7-5.7h49.7c3.1,0,5.7,2.6,5.7,5.7v28.3C81.9,374.5,79.3,377.1,76.2,377.1z"><g x="10" y="10"><foreignObject dy=".35em" x="10" y="10" style="fill: white;">Turn on</foreignObject></g></path>

我正在使用以下代码：

var button=d3.select("#pumpButton");
    var g=button.append("g")
    .attr('x',10)
    .attr('y',10)
    g.append("text")
    .attr("dy", ".35em")
    .style('fill', 'white')
    .attr("x",10)
    .attr("y",10)
    .text("Turn on")

但我在屏幕上看不到任何东西。当我检查元素时，它似乎在那里，但我看不到它。

检查时元素如下所示

<g x="10" y="10"><text dy=".35em" x="10" y="10" style="fill: white;">Turn on</text></g>

SVG分为容器元素（如<g>、<svg>）和图形元素如<path>和<text>。

图形元素

只能是容器的子元素，即不能在图形元素中嵌套图形元素。

不要试图使文本成为路径的子项，而应使其成为后续同级。

相关文章：