html - dynamic svg element added by Javascript doesn't work

Question

Welcome To Ask or Share your Answers For Others

html - dynamic svg element added by Javascript doesn't work

asked Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

I'm really confused here. I have a static SVG element that displays 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>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

589 views

1 Answer

深蓝 · Answer 1 · 2021-10-23T21:27:28+0000

Use

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

instead of

document.createElement('svg')

Explanation:

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

createElement basically creates html elements called svg and circle rather than SVG elements.

text/html doesn't really have namespaces so the HTML parser magically switches to the SVG namespace when it encounters an <svg> element. If you changed the mime type to some XML namespace e.g. http://www.w3.org/1999/xhtml/ then you'd need an xmlns attribute on the root <html> element and also on 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>

Categories

html - dynamic svg element added by Javascript doesn't work

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags