Создайте элемент SVG из строки и добавьте его в элемент Div - PullRequest
Новая
       8

Создайте элемент SVG из строки и добавьте его в элемент Div

2 голосов
/ 09 июля 2020

Я хочу создать элементы SVG из строки, например 

var svgStr = '<svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"/>';

, а затем добавить его к существующему элементу HTML, используя JavaScript. Пробовал много чего, но, похоже, застрял с этой ошибкой: https://i.stack.imgur.com/0XUXF.png

Я тоже пробовал это, но не заставил его работать: https://jsfiddle.net/ramnathv/rkkpfvfz/

Я был бы совсем не против, если бы вы могли объяснить это так, как это может понять шестилетний ребенок ^^

Спасибо большое за любую помощь! 

<html>
<body>

<h2>Boolean Network</h2>

<button type="button" onclick="appendSVG1()">Next</button>
<button type="button" onclick="appendSVG2('svgAnchor', svgStr)">Next2</button>

<div id="svgAnchor" value="3">

</div>

<script>
var parser = new DOMParser();
var svgStr = '<svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"/>';

function appendSVG1(){
    anchor = document.getElementById("svgAnchor");
    //nextState = parseInt(anchor.getAttribute("value")) + 1;
    //anchor.setAttribute("value", nextState);
    newSVG = parser.parseFromString(svgStr, "image/svg+xml");
    anchor.appendChild(document.adoptNode(newSVG.documentElement));
}

function appendSVG2(id, xml_string){
  var doc = new DOMParser().parseFromString(xml_string, 'application/xml');
  var el = document.getElementById(id)
  el.appendChild(el.ownerDocument.importNode(doc.documentElement, true))
}

</script> 
</body>
</html> ```

1 Ответ

1 голос
/ 09 июля 2020

Я не знаю, как заставить метод, который вы пробовали, работать, но есть гораздо более простой способ: поместить все в innerHTML и позволить браузеру разобраться в деталях. 

<html>
    <body>

    <h2>Boolean Network</h2>

    <button type="button" onclick="appendSVG('svgAnchor', svgStr)">Next</button>

    <div id="svgAnchor" value="3">

    </div>

    <script>
    var svgStr = '<svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"/>';

    function appendSVG(id, xml_string){
      var el = document.getElementById(id)
      el.innerHTML = xml_string;
    }

    </script> 
    </body>
    </html>

Как указала enxaneta, вам не хватает закрывающего тега </svg>, что могло быть вашей исходной проблемой. innerHTML переводит браузер в режим «автоматического исправления ошибок», поэтому простые ошибки, такие как отсутствие закрывающего тега, исправляются автоматически.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...