SVG: преобразование экранированной строки SVG и добавление в тело ничего не делает - PullRequest
Новая
       1

SVG: преобразование экранированной строки SVG и добавление в тело ничего не делает

0 голосов
/ 02 января 2019

Предполагается, что приведенный ниже код преобразует сериализованную строку SVG внутри элемента svgString и добавляет ее к телу.

Однако ничего не происходит.

Этот вопрос и аналогичные вопросы были рассмотрены, но не повезло.

В чем проблема?

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

1 Ответ

0 голосов
/ 02 января 2019

Несколько вещей.

Сначала вы хотите, чтобы ваш DOMParser видел &lt; и другие объекты HTML в качестве обработанного символа <. Поэтому не используйте innerHTML, но textContent в качестве источника для вашего DOMParser.

Как только вы это сделаете, вам нужно нацелить тело вашего HTML-документа на innerHTML, если вы хотите клонировать разметку <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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...