HTML 中的 SVG 中的 HTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7458546/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML in SVG in HTML
提问by Spacedman
I have a simple SVG file which views fine in Firefox - its some wrapped text in a box using a foreignObject to include some HTML - the text is wrapped in the div:
我有一个简单的 SVG 文件，它在 Firefox 中可以很好地查看 - 它的一些包装文本使用foreignObject 在一个框中包含一些 HTML - 文本包装在 div 中：
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="500">
<foreignObject class="node" x="46" y="22" width="200" height="300">
<body xmlns="http://www.w3.org/1999/xhtml">
<div>The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs</div>
</body>
</foreignObject>
</svg>
But no amount of firkling can make this work as an included <svg> element within an HTML document. The div always ends up just being flowed with other divs in the document.
但是，再多的麻烦也无法使这项工作成为 HTML 文档中包含的 <svg> 元素。div 总是最终与文档中的其他 div 一起流动。
Either this is fundamentally not possible or I'm making some mistake with namespaces or something. But can anyone wrap the above SVG in an HTML document and have it display the text in a box of the given width x height at the given position (relative to the SVG or its container, of course)?
要么这从根本上是不可能的，要么我在命名空间或其他方面犯了一些错误。但是任何人都可以将上述 SVG 包装在 HTML 文档中，并让它在给定位置（当然，相对于 SVG 或其容器）的给定宽度 x 高度的框中显示文本？
I've not seen an example of HTML in SVG in HTML, which makes me think its me being stupid or its impossible - the examples out there on the internet seem to just be how to embed HTML in SVG as above. I'm going deeper.
我还没有在 HTML 中看到 SVG 中的 HTML 示例，这让我觉得我是愚蠢的或不可能的 - 互联网上的示例似乎只是如何将 HTML 嵌入到 SVG 中，如上所述。我要深入。
回答by robertc
This works finefor me:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>HTML in SVG in HTML</title>
<style type='text/css'>
svg { border: 1px solid black; }
svg div { border: 1px dotted blue; }
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="500">
<foreignObject class="node" x="46" y="22" width="200" height="300">
<body xmlns="http://www.w3.org/1999/xhtml">
<div>The quick brown fox jumps over the lazy dog. Pack my box with
five dozen liquor jugs</div>
</body>
</foreignObject>
</svg>
</body>
</html>
