将HTML嵌入到HTML中的嵌入式SVG中？ [英] Embedding HTML in embedded SVG in HTML?
问题描述
<！DOCTYPE html>
< html lang =en>
< head>
< title>嗯....< / title>
< / head>
< body>
< svg xmlns =http://www.w3.org/2000/svgversion =1.1x =0y =0width =500pxheight =100％ >
< text>你好残酷的世界！< / text>
< / svg>
< / body>
< / html>
...反之亦然：
< svg xmlns =http://www.w3.org/2000/svgversion =1.1x =0y =0width =500px高度= 100％ >
< foreignObject x =0y =0width =100％height =100％>
< body xmlns =http://www.w3.org/1999/xhtml>
< h1>再见残酷的世界...< / h1>
< / body>
< / foreignObject>
< / svg>
规格 但所有浏览器都会将body标签与HTML5 body标签合并（HTML5 body标签会获得svgbody类）...这是小提琴（ fullscreen ）;内联svg中没有body标签。 我不知道为什么，我希望你能帮助我！可以通过将SVG放在不同的文件中解决，但我不想听到它。为什么它不起作用？ 有一点需要注意的是，SVG文档正在讨论SVG中的XHTML XML文档。您没有使用XML，而是使用HTML。这是HTML解析器的一个功能，它以您看到的方式合并主体标签。 如果您使用的是XML解析器，则不会发生这种合并。为了实现这一点，您需要使用 遵循robertc的建议更容易。 It's allowed to embed SVG in HTML... ...and vice versa: The specs say (23.2, third paragraph) (and I quote:) "If you want to embed SVG in XHTML in SVG in XHTML in SVG, it's okay...". I thought Wow, that's DEEP! and did this: But all browsers merge the body tag with the HTML5 body tag (the HTML5 body tag gets the svgbody class)... This is the fiddle (fullscreen); there's no body tag within the inline svg. I don't know why, and I hope you can help me out! It might be solved by putting the SVG in a different file, but I don't want to hear about it. Why doesn't it work? One thing to bear in mind is that the SVG document is discussing XHTML in SVG in an XML document. You are not using XML but HTML. It's a feature of the HTML parser that merges body tags in the way you see. If you were using an XML parser, that merging wouldn't happen. To achieve this, you'd need to serve the document with an It's much easier to follow robertc's advice. 这篇关于将HTML嵌入到HTML中的嵌入式SVG中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
<！DOCTYPE html>
< html lang =en>
< head>
< title>是的！< / title>
< / head>
< body>
< svg xmlns =http://www.w3.org/2000/svgversion =1.1x =0y =0width =500pxheight =100％ >
< foreignObject x =0y =0width =100％height =100％>
< body class =svgbodyxmlns =http://www.w3.org/1999/xhtml>
< h1>再次打招呼！< / h1>
< / body>
< / foreignObject>
< / svg>
< / body>
< / html>
application / xhtml + xml 内容类型来提供文档。如果您这样做了，那么您需要修复其他问题，例如为您的 html 元素。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hmmm....</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="500px" height="100%">
<text>Hello cruel world!</text>
</svg>
</body>
</html>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="500px" height="100%">
<foreignObject x="0" y="0" width="100%" height="100%">
<body xmlns="http://www.w3.org/1999/xhtml">
<h1>Goodbye cruel world...</h1>
</body>
</foreignObject>
</svg>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Yeah!</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="500px" height="100%">
<foreignObject x="0" y="0" width="100%" height="100%">
<body class="svgbody" xmlns="http://www.w3.org/1999/xhtml">
<h1>And hello again!</h1>
</body>
</foreignObject>
</svg>
</body>
</html>
application/xhtml+xml content type. If you did that, you'd then need to fix other issues like adding a xmlns="http://www.w3.org/1999/xhtml" attribute to your html element.
