6

我已经阅读了一些与此类似的问题，但我无法让我的代码正常工作。当用户单击 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);

在 Google Chrome 中，我收到一条createElementNS不存在的错误消息。NS但是，如果我删除所有内容，我将无法正常工作null。这样做的正确方法是什么？不同浏览器有区别吗？

4

1 回答 1

8

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

var shape = document.createElementNS(svgns,"circle");
于 2011-07-14T18:58:47.933 回答