2011-11-21 10 views
40

JavaScriptでSVG要素を作成するにはどうすればよいですか?私はこれを試しました:JavaScriptでSVGタグを作成する

var svg = document.createElement('SVG'); 
    svg.setAttribute('style', 'border: 1px solid black'); 
    svg.setAttribute('width', '600'); 
    svg.setAttribute('height', '250'); 
    svg.setAttribute('version', '1.1'); 
    svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); 
document.body.appendChild(svg); 

しかし、ゼロ幅とゼロ高さのSVG要素を作成します。

+0

どのブラウザで、あなたがこれをやっていますか? –

答えて

55

これを試してみてください:

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); 
svg.setAttribute('style', 'border: 1px solid black'); 
svg.setAttribute('width', '600'); 
svg.setAttribute('height', '250'); 
svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink"); 
document.body.appendChild(svg); 
+6

ワンダフル - ありがとう!それは私ですか、あるいはSVGは本当にひどいですか? – Richard

+1

"svg:svg"?プレーンな古い "svg"もうまく動作します。また、 'version'はすべてのブラウザで無視されるので、それを追加するのはちょっと無駄です。 –

+3

ありがとう@ErikDahlström、修正済み。そして、svg.setAttributeNS( "http://www.w3.org/2000/xmlns/"、 "xmlns:xlink"、 "http://www.w3.org/1999/xlink")はどうですか? ?本当に名前空間は必要ですか? – TeChn4K

関連する問題