¿Attr() en jQuery fuerza minúsculas?

Question

estoy tratando de manipular el atributo SVG 'viewBox', que es como la siguiente:

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

Usando

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

Sin embargo, esto crea un nuevo atributo en el elemento llamado "negatoscopio". Observe la minúscula en lugar de la prevista camelCase. ¿Hay alguna otra función que debería usar?

Answer 1

pude usar javascript puro para obtener el elemento y establecer el atributo utilizando

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

y

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

Answer 2

usted quiere asegurarse de que se quita el attr si ya existe antes de manipular que

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

y luego volver a crearlo

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

Answer 3

Usted podría utilizar ganchos de 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); 
    }, 
    }; 
}); 

Ahora jQuery se va a utilizar su setter/getters para manipular esos atributos.

Nota que el.attr('viewBox', null) habría fallado; su recolector de gancho no será llamado. En su lugar, debe usar el.removeAttr ('viewBox').

Answer 4

Por http://www.w3.org/TR/xhtml1/#h-4.2 "Los documentos XHTML deben usar minúsculas para todos los nombres de atributos y elementos HTML."

Así que con el fin de evitar que el atributo de convertir a minúsculas en un documento XHTML que necesita para crear el elemento que especifica un espacio de nombres utilizando document.createElementNS(), como:

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

Si va a añadir un elemento <use/> también deberá especificar el espacio de nombres al crear el elemento, así como el atributo xlink:href, como:

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