setAttribute() 메서드는 어떻게 올바르게 사용해야합니까?

Question

나는 createElement() 메서드로 rect 요소를 추가 한 다음 하나의 svg 요소를 가져온 다음 setAttribute() 메서드로 폭과 높이를 지정합니다.

var svg = document.querySelector("svg"); 

function addRect(side) { 
    var newRect = document.createElement("rect"); 
    svg.appendChild(newRect); 

    var thisRect = svg.lastChild; 

    thisRect.setAttribute("width", side); 
    thisRect.setAttribute("height", side); 
} 

addRect("100"); 

http://codepen.io/stromqvist/pen/YWZpNb

크롬 개발 도구의 결과는 <rect width="100" height="100"></rect>을 보여, 아직 RECT는 차원이 없습니다.

내가 뭘 잘못하고 있니?

Answer 1

SVG 요소를 만들 때, 당신은하지만, 폭과 높이 등의 일반 속성, SVG 요소처럼, 자격을 갖춘 네임 스페이스와

document.createElementNS("http://www.w3.org/2000/svg", "svg"); 

특정 속성에 대해 당신이 사용하는 거라고 setAttributeNS을 요소를 만들에는 createElementNS을 사용하십시오 ,의 setAttribute는

svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink"); 

Demo click here