在HTML中嵌入SVG中嵌入HTML？_Html_Xhtml_Svg_Embedding

在HTML中嵌入SVG中嵌入HTML？

html svg

在HTML中嵌入SVG中嵌入HTML？,html,xhtml,svg,embedding,Html,Xhtml,Svg,Embedding,允许在HTML中嵌入SVG <!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" heig

允许在HTML中嵌入SVG

<!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>


再见残酷的世界。。。

规范（23.2，第三段）（我引用：）“如果您想在SVG中的XHTML中嵌入SVG，在SVG中的XHTML中嵌入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>


是 啊
再次问好！

但是所有浏览器都将body标签与HTML5 body标签合并（HTML5 body标签获得svgbody类）。。。这是第（）条；内联svg中没有body标记

我不知道为什么，我希望你能帮助我！可以通过将SVG放在不同的文件中来解决这个问题，但我不想听到这个问题。为什么它不起作用？

你需要身体元素来做一些特别的事情吗？为什么不使用非特权元素包装您的内容：

<body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="100%" height="100%">
        <foreignObject x="0" y="0" width="100%" height="100%">
            <body xmlns="http://www.w3.org/1999/xhtml">
                <div class="svgbody">
                    <h1>This sucks less</h1>
                </div>
            </body>
        </foreignObject>
    </svg>
</body>


这没那么糟

需要记住的一件事是，SVG文档正在XML文档中讨论SVG中的XHTML。您使用的不是XML而是HTML。这是HTML解析器的一个特性，它以您看到的方式合并主体标记

如果您使用的是XML解析器，则不会发生这种合并。要实现这一点，您需要为文档提供

应用程序/xhtml+xml

内容类型。如果这样做了，则需要解决其他问题，如添加

xmlns=”http://www.w3.org/1999/xhtml“

属性到

html

元素

遵循robertc的建议要容易得多。

如果希望html5解析器忽略svg及其内部的一切（）您可以将svg放入注释中；要让svg解析器忽略html注释，请使用cdata：

<html><body><svg>
<![CDATA[  <!--  ]]>
    <ForeingObject />
<![CDATA[   -->  ]]>
</svg></body></html>

]]>

尝试这样的方法…

在中，我找到了以下示例代码。这对我来说很好

<!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
svg{边框：1px纯黑色；}
svg div{边框：1px点蓝色；}
敏捷的棕色狐狸跳过了懒狗。把我的箱子装上
五打酒壶

不过，请注意，即使在今天（2014年3月），HTML文档中对内联SVG的支持充其量也仍然“古怪”

或者干脆完全忽略foreignObject中的body标记。他们没有做任何有用的事情。是的，我做了进一步的阅读，发现XML名称空间没有做任何事情。但将div标记直接放入foreignObject是否有效？这将解决所有问题…

，因为

的直接子对象很好。不过，验证器似乎不喜欢

作为

的直接子对象。“这是HTML解析器的一项功能，它以您所看到的方式合并了主体标记。”这很有趣。@JAB-如果您想要血淋淋的细节，它们在这里：。向下搜索标签名为“body”的起始标签，然后搜索该部分的最后一段。FWIW，html标记也以类似的方式处理。嗯，以这种方式使用

html

标记并不会导致

frameset ok

标记被设置为“not ok”，但

body

标记却被设置为“not ok”，这似乎有点奇怪。

frameset ok

标志用于什么？那里的描述不是很有用。代码笔链接死了。@JeremyBanks:谢谢你指出这一点。由于链接已经有2年历史了，我刚刚删除了它。。。