javascript - 如何将 div 标签附加到 SVG 矩形元素中？

Question

我找不到这个问题的正确解决方案，所以我决定写一个新问题。

我什至不确定这是否可能，但我希望如此。

这是浏览器提供的 HTML。我从浏览器中的“元素”选项卡复制它。

<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 元素。

在布局中使用 div(或 p、h1、li 等)的唯一方法SVG 是通过使用 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