Render SVG String to DOM

by Peter Johnson

HTML

<div id="foo" style="background-color: black; width:500px; height:500px"></div>

CSS

#foo{
  width: 100px;
  height: 100px;
  margin-top: 100px;
}

JavaScript

function render_xml(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)
  )
}


x = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="150" height="150" x="0" y="0"><defs><mask id="SvgjsMask1000"><circle r="75" cx="75" cy="75" fill="#ffffff"></circle></mask></defs><rect width="150" height="85" fill="#ffffff" mask="url(&quot;#SvgjsMask1000&quot;)"></rect><rect width="150" height="7.899999999999999" x="0" y="89.4" fill="#ffffff" mask="url(&quot;#SvgjsMask1000&quot;)"></rect><rect width="150" height="6.399999999999999" x="0" y="103.8" fill="#ffffff" mask="url(&quot;#SvgjsMask1000&quot;)"></rect><rect width="150" height="4.899999999999999" x="0" y="118.19999999999999" fill="#ffffff" mask="url(&quot;#SvgjsMask1000&quot;)"></rect><rect width="150" height="3.3999999999999986" x="0" y="132.6" fill="#ffffff" mask="url(&quot;#SvgjsMask1000&quot;)"></rect><rect width="150" height="1.8999999999999986" x="0" y="147" fill="#ffffff" mask="url(&quot;#SvgjsMask1000&quot;)"></rect></svg>'

render_xml('foo', x)