All geek questions in one place

Dynamically generated SVG element not displayed

I am trying to draw an SVG rectangle using pure JavaScript. He does not appear.

But when I run document.getElementById('rect1')in 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 correctly. Therefore, it seems that the correct code is being added to the document, but the item is not 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
+4
source share
1 answer

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

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

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

More articles:


All Articles