我试图在SVG绘图中使用foreignObject标记输出HTML。我使用d3来生成元素。只有当foreignObject标签中的内容是纯文本时,才会显示foreignObject标签中的HTML内容,否则它只显示为空/空白。请看这个jsfiddle,看看我的问题的一个例子:http://jsfiddle.net/R9e3Y/29/
foreignObject标记中的内容在检查元素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>
但在屏幕上看不到的东西吗如何让内容显示出来?
6条答案
按热度按时间uinbv5nw1#
请确保设置了
width
和height
参数。添加
xmlns
并没有为我解决问题。结果对我来说问题更简单...我没有添加width
和height
参数,所以foreignObject
内部的内容没有显示,即使它在那里。这两个参数似乎默认为0。7gs2gvoe2#
除了@robert-longson的回答:
如果你使用
d3
selection.join()
,它看起来像这样:请注意,
xhtml
命名空间仅在join()
中指定,而在selectAll()
中没有指定。l2osamch3#
我为此开发了一些东西。代码在下面。更高级的版本使用代理来拉入外部非CORS资源。svg
foreignObject
阻止加载任何非CORS跨域请求。我写了一个简单的代理在Runkit上运行。看下面。其局限性是:没有外部非CORS字体,没有非CORS图像。任何想要帮助改进这一点的人,包括添加对图像和字体的支持,都可以在这里做出贡献:https://github.com/dosyago-coder-0/dompeg.js/blob/master/dompeg.js
jjjwad0x4#
h9vpoimq5#
因为你使用的是d3,你需要告诉d3这个div是一个html div,而不是svg命名空间中的某个元素。尝试
xfyts7mz6#
<foreignObject>
允许嵌入各种标记,而不仅仅是HTML。这意味着,必须有一种方法来确定使用什么语言。这就是名称空间发挥作用的地方。要告诉SVG您拥有哪种
foreignObject
,您必须将内容放在适当的名称空间中。在您的示例中,
<div>
元素位于SVG名称空间中,即它是一个SVG元素,而不是HTML元素(尽管是非标准元素)。<foreignObject>
元素也有一个requiredExtensions
属性来告诉浏览器使用哪个扩展,但是不同的浏览器似乎对这个属性的解释不同,所以最好不要设置它。