D3-append('foreignObject'）只添加一个文本和tspan元素

D3 - append('foreignObject') only adds a text and tspan element

本文关键字：文本 tspan 一个元素 foreignObject D3-append 添加更新时间：2023-11-13

所以这让我抓狂：（.我使用D3生成一个svg文档，然后在phantomJs中渲染它，并将输出保存为.svg.

在代码中，我生成一个foreignObject，如下所示：

svg.select("#def-commit") .append('foreignObject') .attr('width', 100) .attr('height', 100) .attr('x', 50) .attr('y', 50) .attr('requiredFeatures','http://www.w3.org/TR/SVG11/feature#Extensibility') .append('xhtml:p') .text("a big chunk of text that should wrap");

现在奇怪的是，生成的文档在DOM中根本没有foreignObject节点。相反，它具有一个text和一个嵌套的tspan。像这样：

<g xmlns="http://www.w3.org/2000/svg" id="def-commit"> <circle r="15" cx="0" cy="0"/> <text xmlns="http://www.w3.org/1999/xhtml"><tspan style="font-size: 11.5pt; font-family: "sans-serif";" x="0" y="14.5">a big chunk of text that should wrap</tspan> </text> </g>

我错过了什么？

其他信息：D3-最新-3.5.16SVG声明

<svg xmlns:xhtml="http://www.w3.org/1999/xhtml" id="mermaidChart0" width="1200" height="904.0178571428571" style="width: 1192; height: 904.0178571428571;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

所以，这是一场大雁追逐赛！

一点背景——我正试图为美人鱼添加一个图表。

美人鱼repo中有一段代码可以扫描svg，并将所有foreignObjects替换为text/tspan：）只是我从未想象过这样的事情，我也不知道为什么我没有像往常一样编译源代码！

如果有人真的降落在这里（尽管我对此表示怀疑），它就在"lib/fintomscript.js"上

感谢阅读。