除非纯文本，否则 SVG foreignObject 内容不会显示 [英] SVG foreignObject contents do not display unless plain text

问题描述

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

I am trying to output HTML using the foreignObject tag inside an SVG drawing. I am using d3 to generate the elements. The only time the HTML content inside the foreignObject tag shows up is when the content inside the foreignObect tag is plain text, otherwise it just shows up as empty/blank. Please see this jsfiddle for an example of my problem: http://jsfiddle.net/R9e3Y/29/

在检查元素 this 时，foreignObject 标签内的内容显示:

The contents inside the foreignObject tag show up on inspecting the element this this:

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

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

but are not visible on the screen? How do I get the content to show up?

推荐答案

由于您使用的是 d3，因此您需要告诉 d3 该 div 是一个 html div 而不是 svg 命名空间中的某个元素.试试

Since you're using d3 you need to tell d3 that the div is a html div and not some element in the svg namespace. Try

.append("xhtml:div")

这篇关于除非纯文本，否则 SVG foreignObject 内容不会显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！