HTML中的SVG HTML [英] HTML in SVG in HTML
问题描述
我有一个简单的SVG文件，可以在Firefox浏览器中正常显示 - 它使用foreignObject包含一些HTML文本 - 文本包装在div中：
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 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>
但是，没有任何一项工作可以使这项工作成为一项包含< svg> HTML文档中的元素。 div总是以文档中其他div的形式出现。
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.
要么这根本不可能，要么我在命名空间或其他方面犯了一些错误。但是，任何人都可以将上面的SVG包装在HTML文档中，并让它在给定位置（相对于SVG或其容器，当然是）相对于给定宽度x高度的框中显示文本？
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)?
我没有在HTML中看到SVG中HTML的例子，这让我觉得它是愚蠢的还是不可能的 - 互联网上的例子似乎就是如何将HTML嵌入到SVG如上。
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.
推荐答案
This works fine for 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>
这篇关于HTML中的SVG HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
