2013-09-12 1 views
1

Я пытаюсь добавить элемент пути к некоторому встроенному svg с помощью javascript, но я получаю сообщение об ошибке: «Uncaught NotFoundError: была сделана попытка ссылаться на узел в контексте, где он не существует » Может ли кто-нибудь объяснить, почему этот javascript не работает с моим HTML?Добавить путь к SVG с javascript

<body> 
    <svg height='500' width='500'></svg> 


    <script> 
     var svg = document.getElementsByTagName("svg")[0]; 
     var pathElement = svg.appendChild("path"); 
    </script> 

</body> 

ответ

2

AppendChild принимает элемент, а не строку, так что вам нужно что-то вроде этого ...

var svg = document.getElementsByTagName("svg")[0]; 
var path = document.createElementNS("http://www.w3.org/2000/svg", "path"); 

// Use path.setAttribute("<attr>", "<value>"); to set any attributes you want 

var pathElement = svg.appendChild(path); 
+0

Ха-ха, конечно, пора удалить мой ответ – BenLanc

0

Работа пример для тех, кто проходил мимо, кто хочет видеть его в действии: http://jsfiddle.net/huvd0fju/

HTML

<svg id="mysvg" width="100" height="100"> 
    <circle class="c" cx="50" cy="50" r="40" fill="#fc0" /> 
</svg> 

JS

var mysvg = document.getElementById("mysvg"); 
//uncomment for example of changing existing svg element attributes 
/* 
var mycircle = document.getElementsByClassName("c")[0]; 
mycircle.setAttributeNS(null,"fill","#96f"); 
*/ 
var svgns = "http://www.w3.org/2000/svg"; 
var shape = document.createElementNS(svgns, "rect"); 
shape.setAttributeNS(null,"width",50); 
shape.setAttributeNS(null,"height",80); 
shape.setAttributeNS(null,"fill","#f00"); 
mysvg.appendChild(shape); 

 Смежные вопросы

  • Нет связанных вопросов^_^