发表新帖
发表新帖

Embedding HTML in embedded SVG in HTML?

前端 未结
关注
4 743
情歌与酒
情歌与酒 2021-01-05 04:50

It\'s allowed to embed SVG in HTML...



    
        Hmmm....
相关标签:
4条回答
  • 执念已碎
    2021-01-05 05:00

    In HTML in SVG in HTML, I found the following example code. It 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>

    Still, note that support for inline SVG in HTML documents remains "quirky" at best, even today (March 2014).

    0 讨论(0)
  • 星月不相逢
    2021-01-05 05:01

    If you want the html5 parser to ignore the svg and everything inside it () you could just put the svg into an comment; to let the svg parser ignore the html-note use cdata:

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

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

    try something like this...

    0 讨论(0)
  • 终归单人心
    2021-01-05 05:06

    Do you need the body element for something in particular? Why not just wrap your content with a non-privileged element:

    <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>
    0 讨论(0)
  • 抹茶落季
    2021-01-05 05:17

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

    It's much easier to follow robertc's advice.

    0 讨论(0)
 看不清?
提交回复
热议问题