SVG — hasClass, addClass, removeClass, toggleClass

svg-classes.js

//
// SVG — hasClass, addClass, removeClass, toggleClass
//  Source:
//   https://gist.github.com/branneman/8436956
//  Taken and adapted from:
//   http://toddmotto.com/hacking-svg-traversing-with-ease-addclass-removeclass-toggleclass-functions/
//

if (SVGElement && SVGElement.prototype) {

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

    SVGElement.prototype.toggleClass = function (className) {
        if (this.hasClass(className)) {
            this.removeClass(className);
        } else {
            this.addClass(className);
        }
    };

}

Going to try this out - just what I need.. I think

didn't work :/

I've been working with this, too. It's harder than one would think it is. Working through stuff now, I'll let you know if I find something good that works better.

It did work for me. Thanks

Works great if you use vanilla JS or the array selector from jQuery:

// Works
$('#mysvg')[0].addClass('whatever');

// Doesn't work
$('#mysvg').addClass('whatever');

Look here for a jQuery shim

http://www.justinmccandless.com/blog/Patching+jQuery's+Lack+of+SVG+Support

If you truly want to shim jquery, then toggleClass should be:

    SVGElement.prototype.toggleClass = function (className, state) {
        if (this.hasClass(className) || state===false) {
            this.removeClass(className);
        } else {
            this.addClass(className);
        }
    }; 

You can access classList property and you can do:

SVGElement.classList.add("className");
SVGElement.classList.remove("className");
SVGElement.classList.toggle("className");