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

问题描述

我试图在SVG图形中使用foreignObject标签输出HTML。我使用d3来生成元素。只有当foreignObject标签中的HTML内容显示出来的时候，当foreignObect标签内的内容是纯文本时，否则它只是显示为空/空。请参阅此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/

在检查元素时，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屋！