setAttribute（）メソッドを正しく使用するにはどうすればよいですか？

Question

私は、createElement（）メソッドでrect要素を追加してから、setAttribute（）メソッドで幅と高さを指定する単一のsvg要素を持っています。

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

クロムdevのツールで結果が<rect width="100" height="100"></rect>を示し、まだRECTは、任意の次元を持っていません。

私は間違っていますか？

Answer 1

SVG要素を作成するとき、あなたは資格の名前空間を持つ要素を作成するためにはcreateElementNSを使用したい、SVG要素

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

、あなたがsetAttributeNSを使用したい特定の属性のために、しかし、幅と高さのような定期的な属性のような、setAttributeメソッドは

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

Demo click here