Estoy usando jQuery SVG. No puedo agregar o eliminar una clase a un objeto. Alguien sabe mi error?
El SVG:
<rect class="jimmy" id="p5" x="200" y="200" width="100" height="100" />
El jQuery que no agregará la clase:
$(".jimmy").click(function() {
$(this).addClass("clicked");
});
Sé que SVG y jQuery funcionan bien juntos porque puedo apuntar al objeto y disparar una alerta cuando se hace clic:
$(".jimmy").click(function() {
alert('Handler for .click() called.');
});
javascript
jquery
css
svg
jquery-svg
Don P
fuente
fuente
Respuestas:
Editar 2016: lea las siguientes dos respuestas.
element.classList.add('newclass')
funciona en navegadores modernosJQuery (menos de 3) no puede agregar una clase a un SVG.
.attr()
funciona con SVG, así que si quieres depender de jQuery:Y si no quieres depender de jQuery:
fuente
.attr("class", "oldclass")
(o lo más engorroso.setAttribute("class", "oldclass")
) realmente no es equivalente a eliminarnewclass
!Hay element.classList en la API DOM que funciona tanto para elementos HTML como SVG. No es necesario el complemento jQuery SVG o incluso jQuery.
fuente
jQuery 3 no tiene este problema
Uno de los cambios enumerados en las revisiones de jQuery 3.0 es:
Una solución para este problema sería actualizar a jQuery 3. Funciona muy bien:
El problema:
La razón por la cual las funciones de manipulación de clase jQuery no funcionan con los elementos SVG es porque las versiones jQuery anteriores a la 3.0 usan
className
propiedad para estas funciones.Extracto de jQuery
attributes/classes.js
:Esto se comporta como se espera para los elementos HTML, pero para los elementos SVG
className
es un poco diferente. Para un elemento SVG,className
no es una cadena, sino una instancia deSVGAnimatedString
.Considere el siguiente código:
Si ejecuta este código, verá algo como lo siguiente en su consola de desarrollador.
Si tuviéramos que convertir ese
SVGAnimatedString
objeto en una cadena como lo hace jQuery, tendríamos[object SVGAnimatedString]
, que es donde falla jQuery.Cómo maneja esto el complemento jQuery SVG:
El complemento jQuery SVG soluciona este problema parcheando las funciones relevantes para agregar soporte SVG.
Extracto de jQuery SVG
jquery.svgdom.js
:Esta función detectará si un elemento es un elemento SVG y, si lo es, utilizará la
baseVal
propiedad delSVGAnimatedString
objeto si está disponible, antes de recurrir alclass
atributo.La postura histórica de jQuery sobre el tema:
jQuery actualmente enumera este problema en su página No se solucionará . Aquí están las partes relevantes.
Evidentemente, jQuery consideró el soporte SVG completo fuera del alcance del núcleo jQuery, y mejor adaptado para complementos.
fuente
Si tiene clases dinámicas o no sabe qué clases ya podrían aplicarse, entonces este método, creo, es el mejor enfoque:
fuente
Basado en las respuestas anteriores, creé la siguiente API
fuente
Después de cargar
jquery.svg.js
debe cargar este archivo:http://keith-wood.name/js/jquery.svgdom.js
.Fuente: http://keith-wood.name/svg.html#dom
Ejemplo de trabajo: http://jsfiddle.net/74RbC/99/
fuente
Simplemente agregue el constructor prototipo faltante a todos los nodos SVG:
Luego puede usarlo de esta manera sin requerir jQuery:
Todo el crédito va a Todd Moto .
fuente
jQuery no admite las clases de elementos SVG. Puede obtener el elemento directamente
$(el).get(0)
y usarclassList
yadd / remove
. También hay un truco con esto en que el elemento SVG superior es en realidad un objeto DOM normal y puede usarse como cualquier otro elemento en jQuery. En mi proyecto, creé esto para encargarme de lo que necesitaba, pero la documentación proporcionada en la red de desarrolladores de Mozilla tiene una cuña que se puede usar como alternativa.ejemplo
Una alternativa más difícil es usar D3.js como su motor de selección. Mis proyectos tienen gráficos que se crean con él, por lo que también está en el alcance de mi aplicación. D3 modifica correctamente los atributos de clase de los elementos DOM de vainilla y los elementos SVG. Aunque agregar D3 solo para este caso probablemente sería exagerado.
fuente
jQuery 2.2 admite la manipulación de clases SVG
La publicación publicada de jQuery 2.2 y 1.12 incluye la siguiente cita:
Ejemplo usando jQuery 2.2.0
Prueba:
Si hace clic en ese cuadrado pequeño, cambiará su color porque el
class
atributo se agrega / elimina.fuente
Aquí está mi código poco elegante pero funcional que se ocupa de los siguientes problemas (sin ninguna dependencia):
classList
no existe en<svg>
elementos en IEclassName
no representa elclass
atributo en<svg>
elementos en IEgetAttribute()
esetAttribute()
implementacionesUtiliza
classList
donde sea posible.Código:
Ejemplo de uso:
fuente
className
propiedad en lugar de intentar establecer un atributo. La razón por la que "LTE IE7 requiere que strAttributeName sea" className "al configurar, obtener o eliminar un atributo CLASS" es que esos navegadores tienen una implementación defectuosagetAttribute(x)
ysetAttribute(x)
que simplemente obtienen o establecen la propiedad con nombrex
, por lo que es más fácil y más compatible para establecer la propiedad directamente.<svg>
elemento en una página que está diseñada para funcionar en IE 7. Por lo que vale, mi código agrega un atributo de clase con éxito a los<svg>
elementos en IE 7 ya que dicho elemento se comporta como cualquier otro elemento personalizado.Yo uso Snap.svg para agregar una clase y SVG.
http://snapsvg.io/docs/#Element.addClass
fuente
Una solución alternativa podría ser agregar Class a un contenedor del elemento svg:
fuente
Escribí esto en mi proyecto, y funciona ... probablemente;)
ejemplos
fuente
Inspirado por las respuestas anteriores, especialmente por Sagar Gala, he creado esta API . Puede usarlo si no desea o no puede actualizar su versión de jquery.
fuente
O simplemente use los métodos DOM de la vieja escuela cuando JQ tiene un mono en el medio en alguna parte.
Aprende las personas DOM. Incluso en el framework-palooza de 2016, ayuda con bastante regularidad. Además, si alguna vez escuchas a alguien comparar el DOM con el ensamblado, dale una patada por mí.
fuente