更新时间: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
(或p
,h1
,li
等)的唯一方法是使用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