Question

HTML5支持<svg>标记，允许将SVG嵌入HTML。

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

我做了一个小测试，Chrome12不喜欢<p>中的HTML <svg>。是否有一些技术可以使它工作（例如可能是一个html容器标签？）？

Answer 1

是的，对于<foreignObject>元素，请参阅this question了解一些示例。

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

Answer 2

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

Answer 3

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

>>> lines = string1.splitlines()
>>> lines[1], lines[3] = lines[3], lines[1]
>>> '\n'.join(lines)
'Hello\nI am\nJake\nSmith'

更新

请注意，上面有一个“骆驼错误”-应该是<!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>（大写O），而不是foreignObject。拼写是否在“直接” HTML / SVG中并不重要。但是，如果您使用JavaScript（foreignobject），那么没有适当的驼色保护套就无法使用（2020年4月）

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

3 个答案: