Question

我环顾四周，无法看清我做错了什么。我试图将文本添加到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>

Answer 1

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

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

不要试图让文本成为路径的孩子，而是让它成为后来的兄弟。

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

1 个答案: