且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2022-05-07 23:36:05

不幸的是,这是不可能的:您不能将HTML元素附加到SVG元素.

Unfortunately, it's not possible: you cannot append an HTML element to an SVG element.

在SVG中使用div(或ph1li等)的唯一方法是使用foreignObject.在您的代码中,如下所示:

The only way for using a div (or a p, h1, li etc) in an SVG is by using foreignObject. In your code, something like this:

<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

Notice that foreignObject comes after the rectangle, not inside it (as in your code). Also, notice that foreignObject does not work in IE: https://developer.mozilla.org/en/docs/Web/SVG/Element/foreignObject