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

我环顾四周，看不出我做错了什么。我正在尝试将文本添加到和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>

但是我在屏幕上什么也看不见。当我检查元素时，它似乎在那里，但我看不到它

检查时，该元素看起来像这样

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

打开

SVG分为容器元素（如

，

）和图形元素（如

和

）

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

---

不要试图将文本设置为路径的子级，而是将其设置为后续的同级。SVG分为容器元素（如

，

）和图形元素（如

和

）

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

---

不要试图将文本设置为路径的子对象，而是将其设置为后续的同级对象。

将路径和文本附加到同一个对象，不要将文本附加到路径它不起作用将路径和文本附加到同一个对象，不要将文本附加到路径它不起作用啊，因此，我将一个文本元素附加到svg容器中，然后使用路径x、y、宽度和高度将其对齐。Thanksah，所以我将一个文本元素附加到svg容器中，然后使用路径x、y、宽度和高度对齐它。谢谢

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