Как динамически добавить элемент в HTML5 SVG? - PullRequest
Новая
       21

Как динамически добавить элемент в HTML5 SVG?

4 голосов
/ 14 июля 2011

Я прочитал несколько вопросов, подобных этому, но я не могу заставить мой код работать должным образом. Я хочу добавить элемент 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>

Вот 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. Как правильно это сделать? Отличается ли для разных браузеров?

1 Ответ

6 голосов
/ 14 июля 2011

Насколько я знаю, createElementNS() является частью document -варианта, попробуйте: 

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