动态创建的 SVG 元素不显示答案

【问题标题】：dynamically created SVG element not displaying动态创建的 SVG 元素不显示
【发布时间】：2021-11-11 16:00:41
【问题描述】：

我正在尝试使用纯 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

【问题讨论】：

看起来可行...jsfiddle.net/fpG4Z
Creating SVG graphics using javascript?的可能重复
@sfletche 抱歉，我没有明确说明生成矩形的 HTML 文件中的代码是从浏览器控制台复制并粘贴到文档中以进行调试的。不过，我想动态生成矩形。

标签： javascript svg

【解决方案1】：

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

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

【讨论】：