[英]How do you append a svg image to a rect element of another svg image?
[英]How to append div tag into a SVG rect element?
我找不到解决这个问题的正确方法所以我决定写一个新问题。
我甚至不确定这是可能的,但我希望是这样。
所以这是浏览器提供的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元素。
在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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.