html - 除非是纯文本，否则 SVG foreignObject 内容不会显示

Question

我正在尝试使用 SVG 绘图中的 foreignObject 标签输出 HTML。我正在使用 d3 生成元素。只有当 foreignObject 标签内的内容是纯文本时，才会显示 foreignObject 标签内的 HTML 内容，否则它只会显示为空/空白。请参阅此 jsfiddle 以获取我的问题示例:http://jsfiddle.net/R9e3Y/29/

检查元素时会显示 foreignObject 标签内的内容:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
    <foreignObject x="40" y="40" width="100" height="100">
        <div>test</div>
    </foreignObject>
</svg> 

但在屏幕上不可见？如何让内容显示出来？

Answer 1

因为您使用的是 d3，所以您需要告诉 d3 该 div 是一个 html div，而不是 svg 命名空间中的某个元素。尝试

.append("xhtml:div")