SVG:转换转义的SVG字符串并将其追加到正文不会执行任何操作 [英] SVG: converting escaped SVG string and appending to body does nothing
本文介绍了SVG:转换转义的SVG字符串并将其追加到正文不会执行任何操作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
下面的代码应该在内部转换序列化的SVG字符串
svgString元素并将其附加到正文.
The code below is supposed to convert the serialized SVG string inside the
svgString element and append it to the body.
但是什么也没发生.
这个问题和类似的问题进行了咨询，但没有运气.
This question and similar questions were consulted, but no luck.
出什么问题了?
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);
推荐答案
一些事情.
首先，您希望DOMParser将<和其他HTML实体视为呈现的<字符.因此，请勿使用innerHTML，而应使用textContent作为DOMParser的源.
First you want your DOMParser to see < and other HTML entities as the rendered < character. So don't use innerHTML, but textContent as source for your DOMParser.
完成此操作后，如果要将<svg>标记克隆到文档中，则需要以HTML文档正文的innerHTML为目标，但是很可能您也只想导入此已解析的Node直接.
Once you'll have done that, you will need to target your HTML document's body's innerHTML if you want to clone the <svg> markup into your doc, but you might very well also just want to import this parsed Node directly.
// ue the textContent as markup source
var svgString = document.getElementById("svgString").textContent;
var svgDoc1 = new DOMParser().parseFromString(svgString, "text/html")
var svgDoc2 = new DOMParser().parseFromString(svgString, "image/svg+xml");
// target the HTML markup
document.getElementById("result1").innerHTML = svgDoc1.body.innerHTML;
// or even directly
var svgEl = svgDoc2.querySelector('svg');
document.importNode(svgEl); // play safety
document.getElementById("result2").appendChild(svgEl);
<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>
这篇关于SVG:转换转义的SVG字符串并将其追加到正文不会执行任何操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
