Создание формы SVG

Question

Im изо всех сил пытается «динамически» создавать элементы SVG с использованием Firebug. Вот пример jsfiddle, который также терпит неудачу.

http://jsfiddle.net/CLEZc/3/

<svg width="500" height="500"> 
    <circle id="c1" cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 
    </svg> 
<div id="genR" onclick="genRect();" >Generate</div> 




function genRect() { 
    var rect = document.createElementNS ("http://www.w3.org/2000/svg", "rect"); 
    var svg = document.getElementsByTagName ("svg")[0]; 
    console.log (rect); 
    console.log (svg); 
    rect.setAttribute ("width", "50"); 
    rect.setAttribute ("height", "50"); 
    rect.setAttribute ("fill", "#e11a51"); 
    rect.setAttribute ("stroke", "blue"); 
    rect.setAttribute ("x", "75"); 
    rect.setAttribute ("y", "150"); 
    svg.appendChild (rect); 
} 

Спасибо,

Answer 1

Нашел причину. не

Используйте этот HTML:

<svg id="svnContainer" width="500" height="500"> 
    <circle id="c1" cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 
</svg> 
<div id="genR" onclick="genRect();" >Generate</div> 

Используйте этот Javascript:

window.genRect = function() { 
    var rect = document.createElementNS ("http://www.w3.org/2000/svg", "rect"); 
    var svg = document.getElementById('svnContainer'); 
    console.log (rect); 
    console.log (svg); 
    rect.setAttribute ("width", "50"); 
    rect.setAttribute ("height", "50"); 
    rect.setAttribute ("fill", "#e11a51"); 
    rect.setAttribute ("stroke", "blue"); 
    rect.setAttribute ("x", "75"); 
    rect.setAttribute ("y", "150"); 
    svg.appendChild (rect); 
} 

Изменение я сделал в HTML может не быть необходимости, но является более безопасным, так как с помощью ID (который должен быть уникальным), вы гарантируете, что на странице нет другого элемента с тем же (тогда как если вы используете имя, вы не можете быть уверены).

Второе изменение (важное для того, чтобы заставить его работать на jsfiddle), - это способ, которым вы определили функцию. Вы должны сделать это глобальным, как объяснено в этом сообщении (причина связана с тем, как jsfiddle запускает ваш код): JavaScript not running on jsfiddle.net