{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', '推荐 虎瘦雄心在 的问题《SVG: converting escaped SVG string and appending t》','https://www.manongdao.com/q-931056.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
The code below is supposed to convert the serialized SVG string inside the
svgString element and append it to the body.
Nothing happens, however.
This question and similar questions were consulted, but no luck.
What's the problem?
HTML:
<html>
<body>
<div id="svgString" style="display:none">
<svg id="designBox" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg class="background designBackground" x="0%" y="0%" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%" fill="#00B9FC" fill-opacity="1.00"/>
</svg>
<svg id="imageBox1" class="imageBox selectable movable box" x="10%" y="20%" width="80%" height="74.39945404913558%" preserveAspectRatio="true">
<image class="image" x="5.874026893135174%" y="2.707454289732771%" width="88.25194621372965%" height="94.58509142053447%" preserveAspectRatio="none" xlink:href="https://www.dropbox.com/s/bzm1y7tjrhl872s/Screenshot.png?raw=1"/>
<image class="background" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" xlink:href="/images/iPhone/XS_Max_Gold.png"/>
</svg>
<svg id="textBox1" class="textBox selectable movable box" x="0" y="0" width="100%" height="20%">
<rect class="background" x="0" y="0" width="100%" height="100%" fill="gray" fill-opacity="0.0"/>
<text class="tspanGroup" y="50%">
<tspan class="textLine selectable" x="50%" dy="-0.9em" text-anchor="middle" dominant-baseline="central" font-family="Lato" font-size="18" fill="#FFFFFF">Change This Line</tspan><tspan class="textLine selectable" x="50%" dy="1.8em" text-anchor="middle" dominant-baseline="central" font-family="Lato" font-size="18" fill="#FFF">Change This Line, Too</tspan>
</text>
</svg>
<svg id="guideBox" width="100%" height="100%"/>
<svg id="selectionBox" width="100%" height="0%" pointer-events="none">
<rect class="background" x="0" y="0" width="100%" height="100%"/>
</svg>
</svg>
</div>
<div id="result1"></div>
<div id="result2"></div>
This is a test
</body>
</html>
JavaScript:
var svgString = document.getElementById("svgString").innerHTML;
var svgDoc1 = new DOMParser().parseFromString(svgString, "text/html")
var svgDoc2 = new DOMParser().parseFromString(svgString, "image/svg+xml");
document.getElementById("result1").innerHTML = svgDoc1.textContent;
document.getElementById("result2").innerHTML = svgDoc2.textContent;
console.log("SVG string: " + svgString);
A few things.
First you want your DOMParser to see
<and other HTML entities as the rendered<character. So don't useinnerHTML, buttextContentas source for your DOMParser.Once you'll have done that, you will need to target your HTML document's body's
innerHTMLif you want to clone the<svg>markup into your doc, but you might very well also just want to import this parsed Node directly.