¿Por qué es jQuery los valores de atributo de la carcasa inferior automática?

Question

estoy trabajando con un SVG que se coloca directamente en un archivo HTML

<svg> 
    Contents... 
</svg> 

uso de JavaScript/jQuery Quiero añadir un atributo al SVG

$("svg").attr("viewBox", "0 0 166 361"); 

Aquí está el SVG modificado después de correr el script anterior

<svg viewbox="0 0 166 361"> 
    Contents... 
</svg> 

note que pone viewbox not viewBox. Dado que viewbox (minúsculas) no hace nada, necesito que sea viewBox (camelcase)

¿Alguna idea?

** Actualización **

hice una pequeña prueba en la que dictó el atributo viewBox desde el lado del servidor, entonces me encontré con el guión anterior. Puede ver que 1. Cuando se representa desde el lado del servidor, está bien. 2. jQuery no reconoció el atributo camelCase viewBox e insertó otro en minúsculas.

<svg version="1.1" id="Layer_1" x="0pt" y="0pt" width="332" 
    height="722" viewBox=" 0 0 100 100" viewbox="0 0 166 332"> 
... 
</svg> 

Answer 1

Depende del tipo de documento de codificación. XHTML documents must use lower case for all HTML element and attribute names. No estoy seguro de HTML.

Actualización 2

La única solución que pude encontrar es utilizar:

$("svg")[0].setAttribute("viewBox", "0 0 166 361"); 

actualización

No puedo explicarlo por cualquier razón, he probado en mi propio host porque JsFiddle siempre usa XHTML (boo!). En todos los casos, era minúscula, pero seguía siendo un elemento SVG en FF, Chrome e IE9 (no sé si eran válidos porque no sé SVG, me temo).

Answer 2

que puede utilizarlo. Creo que usted está viendo en es decir desarrollador barra de herramientas

su fina

es sólo mostrarlo minúscula

pero si intenta alertar al valor camel case - que SE ver el resultado.

tratar de hacer:

alert(("svg").attr("viewBox")); 

Answer 3

http://docs.jquery.com/Won't_Fix#SVG.2FXML.2FVML_Bugs

jQuery reconocen que ToLower todos los nombres de atributos, pero no se preocupan de hacer excepciones/eliminar esta línea como se ignoran los errores relacionados con SVG (el ToLower es superfluo en mi opinión).

Answer 4

Dado que html no distingue entre mayúsculas y minúsculas y las etiquetas y atributos xhtml deben estar en minúsculas, jQuery convierte el nombre del atributo en minúsculas. Debido a que xml distingue entre mayúsculas y minúsculas, es un problema para el lenguaje xml incrustado cuando usan nombres de atributos camel case como SVG.

Puede usar los ganchos jQuery para manejar los nombres de los atributos que le gustaría que la caja no se convierta. Si jQuery encuentra jQuery.attrHooks[attributename].set para establecer, lo usará para establecer el atributo. Lo mismo para jQuery.attrHooks[attributename].get cuando intenta recuperar el valor del atributo. Por ejemplo:

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

Ahora jQuery usará su setter/getters para manipular esos atributos.

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