我可以将HTML嵌入到HTML5 SVG片段中吗？

Question

我可以将HTML嵌入到HTML5 SVG片段中吗？

Ser*_*ier 46 html5 svg

HTML5支持<svg>标记,允许将SVG嵌入到HTML中.

深入挖掘,我可以在<svg>片段中嵌入一些HTML 吗？例如,我想<table>在我的SVG图形的某些部分放置一个CSS .

我做了一个小测试,Chrome12不喜欢<p>里面的HTML <svg>.是否有一些技术可以使它工作(例如可能是一个html容器标签？)？

Answer 1

Eri*_*röm 41

是的,有了该<foreignObject>元素,请参阅此问题以获取一些示例.

或者,如果你有一个html5文档,你也可以使用CSS定位和z-index使html的部分可以显示在你希望在svg之上放置的位置.如果你这样做,你不需要将html嵌套在svg片段中.根据我的经验,这将为您提供跨浏览器最一致的行为.

Answer 2

mat*_*uds 14

复制自bl.ocks.org（谢谢Janu Verma）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML inside SVG</title>
    <style type="text/css"></style></head>
    <body>
        <div>I'm a div inside the HTML</div>
        <svg width="500" height="300" style="border:1px red solid" xmlns="http://www.w3.org/2000/svg">
            <foreignobject class="node" x="46" y="22" width="100" height="100">
                <div style="border:1px green solid">I'm a div inside a SVG.</div>                
            </foreignobject>
            <circle cx="100" cy="160" r="50" fill="blue"></circle>
        </svg>
        <div>Interesting! But you a Foreign Object.</div>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

更新

请注意，上面有一个“骆驼错误” - 它应该是foreignObject（大写O），而不是foreignobject。如果拼写错误出现在“直接”HTML/SVG 中也没关系。但如果您使用 JavaScript ( .createElementNS)，那么如果没有正确的驼峰式大小写，它将无法工作（2020 年 4 月）

Answer 3

atl*_*ith 6

Internet Explorer不支持外部对象.请检查ForeignObject

归档时间：	14 年，5 月前
查看次数：	22543 次
最近记录：	8 年，7 月前