Create SVG Element from String and append it to Div Element

Question

I want to create SVG Elements from a String like

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

And then append it to an existing HTML Element using JavaScript. Been Trying a lot of stuff but I seem to have gotten stuck with this error: https://i.sstatic.net/0XUXF.png

I tried this one as well, but didn't get it to work: https://jsfiddle.net/ramnathv/rkkpfvfz/

I wouldn't mind at all if you could explain it in a way a six year old could understand it ^^

THX a lot for any help!

<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> ```

you need to close the svg tag: </svg>

enxaneta
– enxaneta

2020-07-09 19:09:18 +00:00
Commented Jul 9, 2020 at 19:09 — enxaneta
– enxaneta, Commented Jul 9, 2020 at 19:09

Александр · Accepted Answer · 2020-07-10 02:52:13Z

2

I don't know how to make the method you've been trying work, but there's a much simpler way: put everything in innerHTML and let the browser sort out the details.

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

As enxaneta pointed out, you're missing the </svg> closing tag, which might have been your original problem. innerHTML puts the browser in full "automatically fix errors" mode, so simple mistakes like missing a closing tag get silently repaired.

edited Jul 10, 2020 at 2:52

Александр

14.7k3 gold badges32 silver badges60 bronze badges

answered Jul 9, 2020 at 19:16

Brilliand

13.8k6 gold badges49 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Create SVG Element from String and append it to Div Element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related