除非是纯文本,否则 SVG 外来对象内容不会显示

2024-02-25

我正在尝试使用 SVG 绘图中的foreignObject 标签输出 HTML。我正在使用 d3 生成元素。只有当foreignObect 标签内的内容是纯文本时,foreignObject 标签内的HTML 内容才会显示,否则它只会显示为空/空白。请参阅此 jsfiddle 作为我的问题的示例:http://jsfiddle.net/R9e3Y/29/ 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> 

但在屏幕上看不到?如何让内容显示出来?


由于您使用的是 d3,因此您需要告诉 d3 div 是 html div,而不是 svg 命名空间中的某些元素。尝试

.append("xhtml:div")
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

除非是纯文本,否则 SVG 外来对象内容不会显示 的相关文章