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

问题描述 投票:48回答:3

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

再深究一下,我是否可以在我的 <svg> 片段?例如,我想把一个CSS的 <table> 在我的SVG图形的某些部分。

我做了一个小测试,Chrome12不喜欢这个 HTML <p> 里面 <svg>.有没有什么技术可以让它工作(比如也许是一个html容器标签?

html svg
3个回答
43
投票

是的,有了... <foreignObject> 元素,见 这个问题 的一些例子。

另外,如果你有一个html5文档,你也可以使用CSS定位和z-index来使html的一部分在svg的顶部可见。如果您这样做,您不需要将 html 嵌套在 svg 片段中。根据我的经验,这将为您提供在不同浏览器中最一致的行为。


6
投票

Internet explorer不支持外来对象。请检查 外来对象


1
投票

抄自 bl.cks.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>

更新

请注意,上面有一个 "骆驼的错误"--应该是这样的。foreignObjectforeignobject. 如果是在 "直接 "的HTMLSVG中拼写错误并不重要。但是如果你使用JavaScript (.createElementNS),那么如果没有合适的骆驼壳就无法工作(2020年4月)

© www.soinside.com 2019 - 2024. All rights reserved.