{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 劫难 的问题《Embedding HTML in embedded SVG in HTML?》','https://www.manongdao.com/q-323553.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
It's allowed to embed SVG in 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>
...and vice versa:
<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>
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:
<!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>
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?
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:
http://www.w3schools.com/xml/xml_cdata.asp
try something like this...
Do you need the body element for something in particular? Why not just wrap your content with a non-privileged element:
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+xmlcontent type. If you did that, you'd then need to fix other issues like adding axmlns="http://www.w3.org/1999/xhtml"attribute to yourhtmlelement.It's much easier to follow robertc's advice.
In HTML in SVG in HTML, I found the following example code. It works fine for me.
Still, note that support for inline SVG in HTML documents remains "quirky" at best, even today (March 2014).