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.');
});

Editar 2016: lea las siguientes dos respuestas.

• JQuery 3 soluciona el problema subyacente
• Vanilla JS: element.classList.add('newclass')funciona en navegadores modernos

JQuery (menos de 3) no puede agregar una clase a un SVG.

.attr() funciona con SVG, así que si quieres depender de jQuery:

// Instead of .addClass("newclass")
$("#item").attr("class", "oldclass newclass");
// Instead of .removeClass("newclass")
$("#item").attr("class", "oldclass");

Y si no quieres depender de jQuery:

var element = document.getElementById("item");
// Instead of .addClass("newclass")
element.setAttribute("class", "oldclass newclass");
// Instead of .removeClass("newclass")
element.setAttribute("class", "oldclass");

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.

$(".jimmy").click(function() {
    this.classList.add("clicked");
});

jQuery 3 no tiene este problema

Uno de los cambios enumerados en las revisiones de jQuery 3.0 es:

agregar manipulación de clase SVG ( # 2199 , 20aaed3 )

Una solución para este problema sería actualizar a jQuery 3. Funciona muy bien:

var flip = true;
setInterval(function() {
    // Could use toggleClass, but demonstrating addClass.
    if (flip) {
        $('svg circle').addClass('green');
    }
    else {
        $('svg circle').removeClass('green');
    }
    flip = !flip;
}, 1000);

svg circle {
    fill: red;
    stroke: black;
    stroke-width: 5;
}
svg circle.green {
    fill: green;
}

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>

<svg>
    <circle cx="50" cy="50" r="25" />
</svg>

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:

cur = elem.nodeType === 1 && ( elem.className ?
    ( " " + elem.className + " " ).replace( rclass, " " ) :
    " "
);

Esto se comporta como se espera para los elementos HTML, pero para los elementos SVG classNamees un poco diferente. Para un elemento SVG, classNameno es una cadena, sino una instancia deSVGAnimatedString .

Considere el siguiente código:

var test_div = document.getElementById('test-div');
var test_svg = document.getElementById('test-svg');
console.log(test_div.className);
console.log(test_svg.className);

#test-div {
    width: 200px;
    height: 50px;
    background: blue;
}

<div class="test div" id="test-div"></div>

<svg width="200" height="50" viewBox="0 0 200 50">
  <rect width="200" height="50" fill="green" class="test svg" id="test-svg" />
</svg>

Si ejecuta este código, verá algo como lo siguiente en su consola de desarrollador.

test div
SVGAnimatedString { baseVal="test svg",  animVal="test svg"}

Si tuviéramos que convertir ese SVGAnimatedStringobjeto 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:

function getClassNames(elem) {
    return (!$.svg.isSVGElem(elem) ? elem.className :
        (elem.className ? elem.className.baseVal : elem.getAttribute('class'))) || '';
}

Esta función detectará si un elemento es un elemento SVG y, si lo es, utilizará la baseValpropiedad del SVGAnimatedStringobjeto si está disponible, antes de recurrir al classatributo.

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.

SVG / VML o errores de elementos de espacio de nombres

jQuery es principalmente una biblioteca para el DOM HTML, por lo que la mayoría de los problemas relacionados con documentos SVG / VML o elementos con espacios de nombres están fuera de alcance. Intentamos abordar los problemas que "se filtran" a los documentos HTML, como los eventos que salen de SVG.

Evidentemente, jQuery consideró el soporte SVG completo fuera del alcance del núcleo jQuery, y mejor adaptado para complementos.

Si tiene clases dinámicas o no sabe qué clases ya podrían aplicarse, entonces este método, creo, es el mejor enfoque:

// addClass
$('path').attr('class', function(index, classNames) {
    return classNames + ' class-name';
});

// removeClass
$('path').attr('class', function(index, classNames) {
    return classNames.replace('class-name', '');
});

Basado en las respuestas anteriores, creé la siguiente API

/*
 * .addClassSVG(className)
 * Adds the specified class(es) to each of the set of matched SVG elements.
 */
$.fn.addClassSVG = function(className){
    $(this).attr('class', function(index, existingClassNames) {
        return ((existingClassNames !== undefined) ? (existingClassNames + ' ') : '') + className;
    });
    return this;
};

/*
 * .removeClassSVG(className)
 * Removes the specified class to each of the set of matched SVG elements.
 */
$.fn.removeClassSVG = function(className){
    $(this).attr('class', function(index, existingClassNames) {
        var re = new RegExp('\\b' + className + '\\b', 'g');
        return existingClassNames.replace(re, '');
    });
    return this;
};

Después de cargar jquery.svg.jsdebe 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/

Simplemente agregue el constructor prototipo faltante a todos los nodos SVG:

SVGElement.prototype.hasClass = function (className) {
  return new RegExp('(\\s|^)' + className + '(\\s|$)').test(this.getAttribute('class'));
};

SVGElement.prototype.addClass = function (className) { 
  if (!this.hasClass(className)) {
    this.setAttribute('class', this.getAttribute('class') + ' ' + className);
  }
};

SVGElement.prototype.removeClass = function (className) {
  var removedClass = this.getAttribute('class').replace(new RegExp('(\\s|^)' + className + '(\\s|$)', 'g'), '$2');
  if (this.hasClass(className)) {
    this.setAttribute('class', removedClass);
  }
};

Luego puede usarlo de esta manera sin requerir jQuery:

this.addClass('clicked');

this.removeClass('clicked');

Todo el crédito va a Todd Moto .

jQuery no admite las clases de elementos SVG. Puede obtener el elemento directamente $(el).get(0)y usar classListy add / 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

function addRemoveClass(jqEl, className, addOrRemove) 
{
  var classAttr = jqEl.attr('class');
  if (!addOrRemove) {
    classAttr = classAttr.replace(new RegExp('\\s?' + className), '');
    jqEl.attr('class', classAttr);
  } else {
    classAttr = classAttr + (classAttr.length === 0 ? '' : ' ') + className;
    jqEl.attr('class', classAttr);
  }
}

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.

d3.select(el).classed('myclass', true);

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:

Si bien jQuery es una biblioteca HTML, acordamos que el soporte de clase para elementos SVG podría ser útil. Los usuarios ahora podrán llamar a .addClass () , .removeClass () , .toggleClass () y .hasClass () en SVG. jQuery ahora cambia el atributo de clase en lugar de la propiedad className . Esto también hace que los métodos de clase sean utilizables en documentos XML generales. Tenga en cuenta que muchas otras cosas no funcionarán con SVG, y aún así recomendamos usar una biblioteca dedicada a SVG si necesita algo más allá de la manipulación de clases.

Ejemplo usando jQuery 2.2.0

Prueba:

• .addClass ()
• .removeClass ()
• .hasClass ()

Si hace clic en ese cuadrado pequeño, cambiará su color porque el classatributo se agrega / elimina.

$("#x").click(function() {
    if ( $(this).hasClass("clicked") ) {
        $(this).removeClass("clicked");
    } else {
        $(this).addClass("clicked");
    }
});

.clicked {
    fill: red !important;  
}

<html>

<head>
    <script src="https://code.jquery.com/jquery-2.2.0.js"></script>
</head>

<body>
    <svg width="80" height="80">
        <rect id="x" width="80" height="80" style="fill:rgb(0,0,255)" />
    </svg>
</body>

</html>

Aquí está mi código poco elegante pero funcional que se ocupa de los siguientes problemas (sin ninguna dependencia):

• classListno existe en <svg>elementos en IE
• classNameno representa el classatributo en <svg>elementos en IE
• IE viejo roto getAttribute()e setAttribute()implementaciones

Utiliza classListdonde sea posible.

Código:

var classNameContainsClass = function(fullClassName, className) {
    return !!fullClassName &&
           new RegExp("(?:^|\\s)" + className + "(?:\\s|$)").test(fullClassName);
};

var hasClass = function(el, className) {
    if (el.nodeType !== 1) {
        return false;
    }
    if (typeof el.classList == "object") {
        return (el.nodeType == 1) && el.classList.contains(className);
    } else {
        var classNameSupported = (typeof el.className == "string");
        var elClass = classNameSupported ? el.className : el.getAttribute("class");
        return classNameContainsClass(elClass, className);
    }
};

var addClass = function(el, className) {
    if (el.nodeType !== 1) {
        return;
    }
    if (typeof el.classList == "object") {
        el.classList.add(className);
    } else {
        var classNameSupported = (typeof el.className == "string");
        var elClass = classNameSupported ?
            el.className : el.getAttribute("class");
        if (elClass) {
            if (!classNameContainsClass(elClass, className)) {
                elClass += " " + className;
            }
        } else {
            elClass = className;
        }
        if (classNameSupported) {
            el.className = elClass;
        } else {
            el.setAttribute("class", elClass);
        }
    }
};

var removeClass = (function() {
    function replacer(matched, whiteSpaceBefore, whiteSpaceAfter) {
        return (whiteSpaceBefore && whiteSpaceAfter) ? " " : "";
    }

    return function(el, className) {
        if (el.nodeType !== 1) {
            return;
        }
        if (typeof el.classList == "object") {
            el.classList.remove(className);
        } else {
            var classNameSupported = (typeof el.className == "string");
            var elClass = classNameSupported ?
                el.className : el.getAttribute("class");
            elClass = elClass.replace(new RegExp("(^|\\s)" + className + "(\\s|$)"), replacer);
            if (classNameSupported) {
                el.className = elClass;
            } else {
                el.setAttribute("class", elClass);
            }
        }
    }; //added semicolon here
})();

Ejemplo de uso:

var el = document.getElementById("someId");
if (hasClass(el, "someClass")) {
    removeClass(el, "someClass");
}
addClass(el, "someOtherClass");

Yo uso Snap.svg para agregar una clase y SVG.

var jimmy = Snap(" .jimmy ")

jimmy.addClass("exampleClass");

http://snapsvg.io/docs/#Element.addClass

Una solución alternativa podría ser agregar Class a un contenedor del elemento svg:

$('.svg-container').addClass('svg-red');

.svg-red svg circle{
    fill: #ED3F32;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="svg-container">
  <svg height="40" width="40">
      <circle cx="20" cy="20" r="20"/>
  </svg>
</div>

Escribí esto en mi proyecto, y funciona ... probablemente;)

$.fn.addSvgClass = function(className) {

    var attr
    this.each(function() {
        attr = $(this).attr('class')
        if(attr.indexOf(className) < 0) {
            $(this).attr('class', attr+' '+className+ ' ')
        }
    })
};    

$.fn.removeSvgClass = function(className) {

    var attr
    this.each(function() {
        attr = $(this).attr('class')
        attr = attr.replace(className , ' ')
        $(this).attr('class' , attr)
    })
};    

ejemplos

$('path').addSvgClass('fillWithOrange')
$('path').removeSvgClass('fillWithOrange')

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.

O simplemente use los métodos DOM de la vieja escuela cuando JQ tiene un mono en el medio en alguna parte.

var myElement = $('#my_element')[0];
var myElClass = myElement.getAttribute('class').split(/\s+/g);
//splits class into an array based on 1+ white space characters

myElClass.push('new_class');

myElement.setAttribute('class', myElClass.join(' '));

//$(myElement) to return to JQ wrapper-land

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í.