Question

是否可以将div放入svg形状中？以下是我尝试做的一个例子：

    <!DOCTYPE html>
    <html>
        <body xmlns="http://www.w3.org/1999/xhtml">
            <svg id="main" xmlns="http://www.w3.org/2000/svg" version="1.1">
                <foreignObject x="10" y="10" width="100" height="150">
                    <div>I'm a div in an svg</div>
                </foreignObject>
                <rect fill="red" stroke="darkred" class="box" x="90" y="90" rx="20" ry="20" width="320" height="320" id="box_0">
                    <foreignObject width="100" height="50">
                        <body xmlns="http://www.w3.org/1999/xhtml">
                            <div>Hi, I'm a div inside a shape!! I don't work :(</div>
                        </body>
                    </foreignObject>
                </rect>
            </svg>  
        </body>
    </html>

第二个<div>没有显示，这在某种程度上是可行的吗？

Answer 1

＆lt; rect>元素不能将<foreignObject>元素作为子元素。您必须将<foreignObject>元素作为后来的兄弟，并将其定位在rect元素的顶部。

SVG形状内的HTML <div> </div>

1 个答案: