使用D3將文本添加到SVG路徑

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> 。

圖形元素只能是容器的子級，即您不能將圖形元素嵌套在圖形元素中。

不要試圖使文本成為路徑的子元素，而應使其成為后續的同級元素。