除非纯文本,否则不显示SVG foreignObject内容

Question

我正在尝试使用SVG绘图中的foreignObject标记输出HTML.我正在使用d3来生成元素.foreignObject标记内的HTML内容出现的唯一时间是foreignObect标记内的内容是纯文本,否则它只显示为空/空白.请看这个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")

Answer 2

<foreignObject>允许嵌入各种标记,而不仅仅是HTML.这意味着,必须有一种方法来确定使用何种语言.这就是命名空间发挥作用的地方.

要告诉SVG foreignObject您有什么类型,您必须将内容放在适当的命名空间中.

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

在您的示例中,<div>元素位于SVG名称空间中,即它是SVG元素,而不是HTML元素(尽管是非标准元素).

该<foreignObject>元素还有一个requiredExtensions属性来告诉浏览器使用了哪个扩展名,但是不同的浏览器似乎不同地解释了这个属性,因此最好不要设置它.

Answer 3

确保设置width和height参数。

添加xmlns并不能解决我的问题。事实证明，对我来说，这个问题更加简单...我没有添加width和height参数，因此foreignObject即使其中存在，也不会显示其中的内容。这两个参数似乎默认为0。