使用d3將文本添加到svg路徑中

我環顧四周，看不清我做錯了什麼。我想添加文本和SVG路徑看起來像這樣使用d3將文本添加到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>

來源

2016-01-15 Bob Haslett

追加路徑和文本到同一個東西，不附加文本到路徑它不會工作 – thatOneGuy

SVG分爲容器元素（如<g>，<svg>）和圖形元素如<path>和<text>。

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

不要試圖使文本成爲路徑的子節點，而是使其成爲後續的兄弟節點。

來源

2016-01-15 10:30:28

啊，所以我追加到svg容器的文本元素，然後使用路徑x，y，寬度和高度對齊它。謝謝 –

使用d3將文本添加到svg路徑中

回答

相關問題