CODEWITHSUNDEEP
javascriptsvg
Patrick Brinich-Langlois
Patrick Brinich-Langlois

Reputation: 1429

dynamically created SVG element not displaying

I'm trying to draw an SVG rectangle with pure JavaScript. It's not showing up.

But when I run document.getElementById('rect1') in the the browser console, the rectangle element exists. And when I copy and paste the HTML from the console into the HTML file, the rectangle displays properly. So it seems as though the correct code is being added to the document, but the element isn't being displayed.

HTML: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div>
      <svg id="test" width="500" height="500">
          <!-- code copied from browser console works 
          <rect x="30" y="60" width="50" height="80" style="stroke:#000000; fill:none;" id="rect1">
         </rect> -->
     </svg>

      <svg id="main" width="500" height="500"></svg>
    </div>
    <script src="./src/shapes.js"></script>
  </body>
</html>

JavaScript:

function addSvgElement() {
    var rect = document.createElement("rect");
    rect.setAttribute('x', 30);
    rect.setAttribute('y', 60);
    rect.setAttribute('width', 50);
    rect.setAttribute('height', 80);
    rect.setAttribute('style', "stroke:#000000; fill:none;");
    rect.id = "rect1";
    var svg = document.getElementById('main');
    svg.appendChild(rect);
}

addSvgElement(); // adds correct code, but element doesn't show up

Upvotes: 12

Views: 8685

Answers (1)

Felix Kling
Felix Kling

Reputation: 817128

document.createElement("rect"); will create an unknown HTML DOM element. You have to use the correct namespace to create an SVG DOM element.

var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");

Upvotes: 32

Related Questions