我找不到这个问题的正确解决方案,所以我决定写一个新问题。
我什至不确定这是否可能,但我希望如此。
这是浏览器提供的 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 及其内容没有出现在屏幕上的矩形内。
我想知道是否可以让它出现以及如何实现?
最佳答案
不幸的是,这是不可能的:您无法将 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
关于javascript - 如何将 div 标签附加到 SVG 矩形元素中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39287797/