L'attr() in jQuery forza caratteri minuscoli?

Question

sto cercando di manipolare lo svg attributo 'viewBox', che sembra qualcosa di simile:

<svg viewBox="0 0 100 200" width="100" ...> ... </svg> 

Utilizzando

$("svg").attr("viewBox","..."); 

Tuttavia, questo crea un nuovo attributo nell'elemento chiamato "viewBox". Si noti la minuscola anziché il camelCase previsto. C'è un'altra funzione che dovrei usare?

Answer 1

sono stato in grado di utilizzare javascript puro per ottenere l'elemento e impostare l'attributo utilizzando

var svg = document.getElementsByTagName("svg")[0]; 

e

svg.setAttribute("viewBox","..."); 

Answer 2

si vuole fare in modo di rimuovere l'attr se esiste già prima di manipolare lo

$("svg").removeAttr("viewBox") 

e quindi ricrearlo

$("svg").attr("viewBox","..."); 

Answer 3

È possibile utilizzare ganci jQuery:

['preserveAspectRatio', 'viewBox'].forEach(function(k) { 
    $.attrHooks[k.toLowerCase()] = { 
    set: function(el, value) { 
     el.setAttribute(k, value); 
     return true; 
    }, 
    get: function(el) { 
     return el.getAttribute(k); 
    }, 
    }; 
}); 

Ora jQuery si utilizzerà i vostri setter/getter per manipolare tali attributi.

Nota che el.attr('viewBox', null) avrebbe avuto esito negativo; il tuo hook setter non verrà chiamato. Invece dovresti usare el.removeAttr ('viewBox').

Answer 4

Per http://www.w3.org/TR/xhtml1/#h-4.2 "I documenti XHTML devono utilizzare lettere minuscole per tutti i nomi di elementi e attributi HTML."

Così, al fine di evitare di avere l'attributo convertire in minuscolo in un documento XHTML è necessario creare l'elemento che specifica uno spazio dei nomi utilizzando document.createElementNS(), come:

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); 
    svg.setAttribute('viewBox', '0 0 512 512’); 

Se si prevede di aggiungere un elemento <use/> anche voi necessario specificare lo spazio dei nomi durante la creazione dell'elemento così come l'attributo xlink:href, come:

var use = document.createElementNS('http://www.w3.org/2000/svg','use'); 
    use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#your_svg_id');