动态创建的SVG元素不显示

dynamically created SVG element not displaying

本文关键字：显示 元素 SVG 创建 动态      更新时间：2023-09-26

我试图用纯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

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

var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
相关文章：