如何将div标签附加到SVG rect元素中? [英] How to append div tag into a SVG rect element?

问题描述

我无法找到正确的解决方案，所以我决定写一个新问题.

I couldn't find a correct solution for this problem so I decided to write a new question.

我什至不确定这是否可行，但我希望是这样.

I'm not even sure that this is possible but I hope it is.

这是浏览器提供的HTML.我正在从浏览器的元素"选项卡中复制它.

So here is my HTML that the browser provides. I'm copying it from the "Elements" tab in the browser.

<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创建所有内容).

(I'm creating everything with JS).

我的问题是我正在rect标签内创建此div，但是此div及其内容没有出现在矩形内的屏幕上.

My problem is that I'm creating this div inside the rect tag, but this div and its content doesn't appear on the screen inside the rectangle.

我想知道是否有可能使它出现以及它是如何出现的?

I want to know if it is possible to make it appear and if it is how ?

推荐答案

不幸的是，这是不可能的:您不能将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

这篇关于如何将div标签附加到SVG rect元素中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！