我可以将超文本标记语言嵌入到HTML5 SVG片段中吗？
HTML5支持<svg>标签，允许将SVG嵌入到HTML中。
再深入一点，我可以在<svg>片段中嵌套一些超文本标记语言吗？例如，我想在我的SVG图形的某些部分放置一个CSS‘’d <table>。
我做了一个小测试，Chrome12不喜欢<svg>中的HTML <p>。有没有什么技术可以让它工作(比如html容器标签？)？
回答 3
Stack Overflow用户
发布于 2011-07-01 02:36:13
是的，对于<foreignObject>元素，请参阅this question获取一些示例。
或者，如果您有一个html5文档，您还可以使用CSS定位和z-index来使html的某些部分在您想要在svg顶部布局的地方可见。如果这样做，就不需要将html嵌套在svg片段中。根据我的经验，这将为您提供最一致的跨浏览器行为。
Stack Overflow用户
发布于 2016-12-15 20:00:05
Internet explorer不支持外来对象。请查看ForeignObject
Stack Overflow用户
发布于 2020-04-30 22:12:04
从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>
更新
请注意，在上面的代码中有一个“驼峰错误”-它应该是foreignObject (大写O)，而不是foreignobject。如果拼写错误是在“直接的”HTML/SVG中，这并不重要。但是如果你使用JavaScript (.createElementNS)，那么如果没有适当的camel用例，它将无法工作(2020年4月)
https://stackoverflow.com/questions/6538918
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号