Question

我无法找到解决此问题的正确方法，所以我决定写一个新问题。

我甚至不确定这是可能的，但我希望是这样。

所以这是浏览器提供的HTML。我是从＆＃34; Elements＆＃34;中复制它的。浏览器中的选项卡。

<svg width="960" height="728" style="margin-left: 0px;">
<g transform="translate(0,24)" style="shape-rendering: crispEdges;">
    <g class="depth">
        <g>
            <g>
                <rect class="child" x="0" y="0" width="960" height="704" style="fill: rgb(192, 192, 192);">1.1.1.
                    <div class="jstree">
                        <div>TestContent</div>
                    </div>
                </rect>
            </g>
        </g>
    </g>
</g>

（我用JS创建所有东西）。

我的问题是我在rect标签内创建了这个div，但是这个div及其内容并没有出现在矩形内的屏幕上。

我想知道是否有可能让它出现以及它是如何出现的？

Answer 1

不幸的是，这是不可能的：无法将HTML元素附加到SVG元素。

在SVG中使用div（或p，h1，li等）的唯一方法是使用foreignObject。在您的代码中，类似这样：

<svg width="960" height="728" style="margin-left: 0px;">
<g transform="translate(0,24)" style="shape-rendering: crispEdges;">
    <g class="depth">
        <g>
            <g>
                <rect class="child" x="0" y="0" width="960" height="704" style="fill: rgb(192, 192, 192);">
                </rect>
                <foreignObject x="100" y="100" width="100" height="100">
		    <div xmlns="http://www.w3.org/1999/xhtml" class="jstree">
                        <div>TestContent</div>
                    </div>
	        </foreignObject>
            </g>
        </g>
    </g>
</g>

请注意foreignObject 在矩形之后，而不是在其内部（如代码中所示）。另请注意，foreignObject在IE中不起作用：https://developer.mozilla.org/en/docs/Web/SVG/Element/foreignObject

如何将div标签附加到SVG rect元素中？

1 个答案: