Question

我试图用纯JavaScript绘制一个SVG矩形。它没有出现。

但是当我在浏览器控制台中运行document.getElementById('rect1')时，矩形元素就存在了。当我将HTML从控制台复制并粘贴到HTML文件中时，矩形会正确显示。因此，似乎正在将正确的代码添加到文档中，但该元素未被显示。

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

Answer 1

document.createElement("rect");将创建一个未知的HTML DOM元素。您必须使用正确的命名空间来创建SVG DOM元素。

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

动态创建的SVG元素不显示

1 个答案: