SVG 모양 생성

Question

Firebug를 사용하여 SVG 요소를 '동적으로'생성하는 데 어려움을 겪고 있습니다. 다음은 실패한 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> 

사용이 자바 스크립트 :

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