Question

我已经阅读了几个与此类似的问题，但我无法使代码正常工作。我想在用户点击SVG区域时添加一个SVG元素。

这是我的带有SVG的HTML5，它正确呈现：

<!DOCTYPE html>
<html>
  <head>
    <script src="jquery-1.6.2.min.js"></script>
    <script src="svgdraw.js"></script>
  </head>
  <body>
    <svg id="canvas" width="500" height="500">
    <circle cx="80" cy="80" r="50" fill="blue"/>
    </svg>
  </body>
</html>

以下是在点击事件上执行的JavaScript：

    var svgDocument = document.getElementById('canvas');
    var svgns = "http://www.w3.org/2000/svg";
    var shape = svgDocument.createElementNS(svgns,"circle");
    shape.setAttributeNS(null, "cx", 25);
    shape.setAttributeNS(null, "cy", 25);
    shape.setAttributeNS(null, "r", 20);
    shape.setAttributeNS(null, "fill", "green");
    document.getElementById('canvas').appendChild(shape);

在谷歌浏览器中，我收到createElementNS不存在的错误消息。但如果我删除所有NS和null，我也无法使其正常工作。这样做的正确方法是什么？不同的浏览器是不同的？

Answer 1

据我所知createElementNS()是document - 变量的一部分，请尝试：

var shape = document.createElementNS(svgns,"circle");

如何动态添加元素到HTML5 SVG？

1 个答案: