HTML嵌入在HTML嵌入SVG？(Embedding HTML in embedded SVG i

它允许在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，第三段）（套用:)“如果你想在嵌入在XHTML中的SVG XHTML SVG在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在不同的文件来解决，但我不希望听到它。为什么不工作？

Answer 1:

有一点要记住的是，SVG文档是一个XML文档中讨论XHTML的SVG。您没有使用XML，但HTML。这是HTML解析器合并在你看到的样子体标签的功能。

如果您正在使用的XML解析器，该合并将不会发生。要做到这一点，你需要与服务的文件application/xhtml+xml内容类型。如果你这样做，你再需要解决如添加等问题xmlns="http://www.w3.org/1999/xhtml"属性的html元素。

这是很容易跟随robertc的建议。

Answer 2:

你需要特别的东西body元素？为什么不只是一个非特权元素包装内容：

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

Answer 3:

如果你想在HTML5分析器忽略它里面（的SVG和一切）你可以只把SVG到评论; 让SVG解析器忽略HTML的注意使用CDATA：

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

http://www.w3schools.com/xml/xml_cdata.asp

尝试这样的事情...

Answer 4:

在HTML中的SVG在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的支持充其量仍然是“古怪”，即使在今天（2014年3月）。

文章来源: Embedding HTML in embedded SVG in HTML?