All geek questions in one place

Javascript dynamic svg element not working

I'm really confused. I have a static SVG element that renders fine, but when I add an identical element from Javascript, it doesn't display. Why is this?

<html> <head> <script type="text/javascript"> function doit() { var svgdiv = document.getElementById('svg1'); for (var k = 1; k < 3; ++k) { var svg = document.createElement('svg'); svg.setAttribute('width',100); svg.setAttribute('height',100); console.log(svg); var c = document.createElement('circle'); c.setAttribute('cx',50); c.setAttribute('cy',50); c.setAttribute('r',40); c.setAttribute('stroke','green'); c.setAttribute('stroke-width',4); c.setAttribute('fill','yellow'); svg.appendChild(c); svgdiv.appendChild(svg); } } window.onload = doit; </script> </head> <body> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg> <div id="svg1"></div> </body> </html>
+6
source share
1 answer

Using

 document.createElementNS('http://www.w3.org/2000/svg', 'svg')

instead

 document.createElement('svg')

Explanation:

SVG elements must be created in the SVG namespace and therefore cannot createElement, instead you must use createElementNS, which provide the SVG namespace as the first argument.

createElement basically creates html elements called svg and circle, not SVG elements.

text / html actually has no namespaces, so the HTML parser magically switches to the SVG namespace when it encounters the <svg> element. If you changed the mime type to some XML namespace, for example. http://www.w3.org/1999/xhtml/ , then you need the xmlns attribute in the root <html> element, as well as in the <svg> element.

 <html> <head> <script type="text/javascript"> function doit() { var svgdiv = document.getElementById('svg1'); for (var k = 1; k < 3; ++k) { var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svg.setAttribute('width',100); svg.setAttribute('height',100); console.log(svg); var c = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); c.setAttribute('cx',50); c.setAttribute('cy',50); c.setAttribute('r',40); c.setAttribute('stroke','green'); c.setAttribute('stroke-width',4); c.setAttribute('fill','yellow'); svg.appendChild(c); svgdiv.appendChild(svg); } } window.onload = doit; </script> </head> <body> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg> <div id="svg1"></div> </body> </html>
+7
source

Source: https://habr.com/ru/post/979644/

More articles:


All Articles