如何动态地向HTML5 SVG添加元素

How to dynamically add an element to HTML5 SVG?

本文关键字：HTML5 SVG 添加 元素 何动态 动态      更新时间：2023-09-26

我读过一些类似的问题，但我不能让我的代码正常工作。我想在用户单击SVG区域时添加一个SVG元素。

这是我的HTML5与SVG，它呈现正确:

<!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>
下面是在click事件中执行的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。正确的做法是什么?对于不同的浏览器是不同的吗?

就我所知createElementNS()是document -变量的一部分，尝试:

var shape = document.createElementNS(svgns,"circle");
相关文章：