SVG:转换转义的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>

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);