2011-11-21 17 views
40

Come si crea un elemento SVG con JavaScript? Ho provato questo:Crea tag SVG con JavaScript

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); 

Tuttavia crea un elemento SVG con larghezza zero e altezza zero.

+0

quale browser stai facendo questo con? –

risposta

55

Prova questo:

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

Meraviglioso - grazie! Sono io, o l'SVG è davvero pignolo? – Richard

+1

"svg: svg"? Il semplice "svg" funziona anche bene. Anche la 'versione' è ignorata da tutti i browser, quindi è un po 'uno spreco aggiungerla. –

+3

Grazie @ ErikDahlström, corretto. E che dire di svg.setAttributeNS ("http://www.w3.org/2000/xmlns/", "xmlns: xlink", "http://www.w3.org/1999/xlink"); ? Lo spazio dei nomi è davvero necessario? – TeChn4K