Question

我试图在HTML上创建一个用SVG绘制的简单库。虽然代码生成了有效的HTML，它确实绘制了我想要的东西，但当我以编程方式执行此操作时，屏幕上不会绘制任何内容。这是我使用的代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Hello</title>
</head>
<body>
  <div id="diagram"></div>
  <script type="text/javascript">
    function Diagram(div) {
      div = document.getElementById(div);
      svg = document.createElement("svg");
      svg.setAttribute("width", "600");
      svg.setAttribute("height", "400");
      div.appendChild(svg);

      this.diagram = svg;
      this.rectangle = function (x, y, width, height) {
        rect = document.createElement("rect");
        rect.setAttribute("x", x);
        rect.setAttribute("y", y);
        rect.setAttribute("width", width);
        rect.setAttribute("height", height);
        this.diagram.appendChild(rect);
      }
    }

      var diagram = new Diagram("diagram");
      diagram.rectangle(100, 100, 100, 100);
  </script>
</body>
</html>

毋庸置疑，我没有使用过JS和我在学习JS和SVG时的练习，但是我无法理解为什么我的例子不起作用： - （< / p>

Answer 1

创建SVG元素时，您可以使用createElementNS创建具有限定名称空间的元素，例如SVG元素

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

对于您使用setAttributeNS的某些属性，但对于宽度和高度等常规属性，setAttribute应该有效

svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");

FIDDLE

创建SVG和矩形不起作用

1 个答案: