D3 - append（＆＃39; foreignObject＆＃39;）只添加一个text和tspan元素

Question

所以这让我疯狂:(。我使用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: &quot;sans-serif&quot;;" x="0" y="14.5">a big chunk of text that should wrap</tspan> </text> </g>

我错过了什么？

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

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

Answer 1

所以，事实证明这是一场大雁追逐！

一点背景 - 我试图将图表添加到mermaid。

美人鱼仓库中有代码扫描svg并用text / tspan替换所有foreignObjects :)只是我从未想过这样的东西我不知道为什么我只是没有把源代码格式化为我经常做！

万一有人在这里降落（虽然我对此表示怀疑） - 它在'lib/phantomscript.js'

感谢阅读。