Question

下面的代码应该在内部转换序列化的SVG字符串 svgString元素并将其附加到正文。

但是什么也没发生。

This question和类似的问题进行了咨询，但没有运气。

出什么问题了？

HTML：

<html>
  <body>
    <div id="svgString" style="display:none">
  &lt;svg id="designBox" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;

    &lt;svg class="background designBackground" x="0%" y="0%" width="100%" height="100%"&gt;
      &lt;rect x="0" y="0" width="100%" height="100%" fill="#00B9FC" fill-opacity="1.00"/&gt;
    &lt;/svg&gt;

    &lt;svg id="imageBox1" class="imageBox selectable movable box" x="10%" y="20%" width="80%" height="74.39945404913558%" preserveAspectRatio="true"&gt;
       &lt;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"/&gt;
       &lt;image class="background" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" xlink:href="/images/iPhone/XS_Max_Gold.png"/&gt;
    &lt;/svg&gt;

    &lt;svg id="textBox1" class="textBox selectable movable box" x="0" y="0" width="100%" height="20%"&gt;
       &lt;rect class="background" x="0" y="0" width="100%" height="100%" fill="gray" fill-opacity="0.0"/&gt;

       &lt;text class="tspanGroup" y="50%"&gt;
         &lt;tspan class="textLine selectable" x="50%" dy="-0.9em" text-anchor="middle" dominant-baseline="central" font-family="Lato" font-size="18" fill="#FFFFFF"&gt;Change This Line&lt;/tspan&gt;&lt;tspan class="textLine selectable" x="50%" dy="1.8em" text-anchor="middle" dominant-baseline="central" font-family="Lato" font-size="18" fill="#FFF"&gt;Change This Line, Too&lt;/tspan&gt;
       &lt;/text&gt;
    &lt;/svg&gt;

    &lt;svg id="guideBox" width="100%" height="100%"/&gt;

    &lt;svg id="selectionBox" width="100%" height="0%" pointer-events="none"&gt;
       &lt;rect class="background" x="0" y="0" width="100%" height="100%"/&gt;
    &lt;/svg&gt;

&lt;/svg&gt;
</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);

Answer 1

几件事。

首先，您希望DOMParser将<和其他HTML实体视为呈现的<字符。因此，请勿使用innerHTML，而应使用textContent作为DOMParser的源。

完成此操作后，如果要将innerHTML标记克隆到文档中，则需要将HTML文档正文的<svg>定位为文档，但是很可能您也只想直接导入此已解析的节点。

// 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">
  &lt;svg id="designBox" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;

    &lt;svg class="background designBackground" x="0%" y="0%" width="100%" height="100%"&gt;
      &lt;rect x="0" y="0" width="100%" height="100%" fill="#00B9FC" fill-opacity="1.00"/&gt;
    &lt;/svg&gt;

    &lt;svg id="imageBox1" class="imageBox selectable movable box" x="10%" y="20%" width="80%" height="74.39945404913558%" preserveAspectRatio="true"&gt;
       &lt;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"/&gt;
       &lt;image class="background" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" xlink:href="/images/iPhone/XS_Max_Gold.png"/&gt;
    &lt;/svg&gt;

    &lt;svg id="textBox1" class="textBox selectable movable box" x="0" y="0" width="100%" height="20%"&gt;
       &lt;rect class="background" x="0" y="0" width="100%" height="100%" fill="gray" fill-opacity="0.0"/&gt;

       &lt;text class="tspanGroup" y="50%"&gt;
         &lt;tspan class="textLine selectable" x="50%" dy="-0.9em" text-anchor="middle" dominant-baseline="central" font-family="Lato" font-size="18" fill="#FFFFFF"&gt;Change This Line&lt;/tspan&gt;&lt;tspan class="textLine selectable" x="50%" dy="1.8em" text-anchor="middle" dominant-baseline="central" font-family="Lato" font-size="18" fill="#FFF"&gt;Change This Line, Too&lt;/tspan&gt;
       &lt;/text&gt;
    &lt;/svg&gt;

    &lt;svg id="guideBox" width="100%" height="100%"/&gt;

    &lt;svg id="selectionBox" width="100%" height="0%" pointer-events="none"&gt;
       &lt;rect class="background" x="0" y="0" width="100%" height="100%"/&gt;
    &lt;/svg&gt;

&lt;/svg&gt;
</div>


<div id="result1"></div>
<div id="result2"></div>

SVG：转换转义的SVG字符串并将其追加到正文不会执行任何操作

1 个答案: