Come posso impostare un attributo con il nome con distinzione tra maiuscole e minuscole in un elemento generato da javascript

Question

Creo un elemento svg in javascript e devo impostare un attributo che distingue tra maiuscole e minuscole: viewBox.

L'elemento viene creato in questo modo: var svgElem = document.createElement('svg');

problema è quando impostato quell'attributo via svgElem.setAttribute("viewBox", "0,0,100,100") e aggiungere alla DOM, l'elemento risultante mostra come questo: <svg viewbox="0,0,100,100"></svg>

Questo non funziona perché il viewBox è sensibile al maiuscolo/minuscolo, non avrà alcun effetto se la lettera B è in minuscolo.

IE allows an IFlag parameter solo per casi come questi, tuttavia il mio pubblico di destinazione è limitato agli utenti FireFox e Chrome, che non dispongono di IFlag per setAttribute per quanto ho potuto trovare.

C'è un modo per farlo funzionare senza usare innerHTML e javascript senza libreria?

EDIT: Ho anche provato usando la notazione punto senza successo svg.viewBox = "0,0,100,100"

Answer 1

È necessario creare un vero e proprio elemento svg. Quando si esegue:

var svg = document.createElement('svg'); 

cosa si sta effettivamente ottenendo è un elemento HTML denominato svg, non un elemento SVG. La chiave qui è che SVG non è in realtà un elemento HTML, è una radice di documento estraneo. Per creare un elemento SVG correttamente, è necessario fare

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); 

In particolare, questo crea un elemento XML, piuttosto che un elemento HTML. Nel caso di base del browser,

document.createElement('div') 

è lo stesso di

document.createElementNS('http://www.w3.org/1999/xhtml', 'div'); 

Questo fa una grande differenza, perché in HTML, nomi di attributi non sono case-sensitive, mentre in XML, lo sono. Inoltre, se si dovesse aggiungere SVG al DOM, si comporterebbe come un div poiché è un elemento HTML sconosciuto, piuttosto che un elemento SVG reale. Un parser HTML è abbastanza intelligente da creare un nodo radice estraneo invece di un elemento HTML sconosciuto, ma il tuo codice è programmatico, quindi non può farlo automaticamente.

Answer 2

Funziona bene per me in Chrome e Firefox.

var svgns = "http://www.w3.org/2000/svg"; 
 

 
var svg = document.createElementNS(svgns, "svg"); 
 
svg.setAttribute("width", "400"); 
 
svg.setAttribute("height", "400"); 
 

 
var circle = document.createElementNS(svgns, "circle"); 
 
circle.setAttribute("cx", "300"); 
 
circle.setAttribute("cy", "300"); 
 
circle.setAttribute("r", "100"); 
 
svg.appendChild(circle); 
 

 
document.getElementById("container").appendChild(svg); 
 

 
// Now change the viewBox 
 
svg.setAttribute("viewBox", "200 200 200 200");

<div id="container"> 
 
</div>

(Nota: aggiornato per creare lo SVG da zero come da richiesta PO)

Answer 3

È necessario creare il valore tramite createAttribute, vedere Setting attribute value of an element in camelCase using a directive

var div1 = document.createElementNS("http://blabla/svg", "view"); 
var attr1 = document.createAttribute("viewBox"); 
attr1.value = "200 200 200 200"; 
div1.setAttributeNode(attr1);