2011-11-21 63 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」也可以工作得很好。所有的瀏覽器都會忽略'版本',所以添加它會有點浪費。 –

+3

謝謝@ErikDahlström,更正。那麼svg.setAttributeNS(「http://www.w3.org/2000/xmlns/」,「xmlns:xlink」,「http://www.w3.org/1999/xlink」)呢? ?命名空間是必要的嗎? – TeChn4K