Jquery SVG, why can't I addClass?

Dealing with SVG Namespace in jQuery

SVG elements exist under a XML namespace, differing from HTML elements that jQuery deals with. Let's explore how this affects adding and removing classes.

Adding and removing classes in jQuery

In jQuery, use attr to add classes without erasing existing ones.

// Lady Gaga style reinvention, without totally losing herself.
var existingClasses = $("#item").attr("class");
$("#item").attr("class", existingClasses + " newIdentity");


Remove a class using a similar approach:

// A little less spice in my Pumpkin Spice Latte, please.
var existingClasses = $("#item").attr("class");
$("#item").attr("class", existingClasses.replace(/overwhelmingSpice\b/, ""));


Adding and removing classes in JavaScript

JavaScript — typically more verbose — comes to your rescue with a terse syntax using classList:

// Hey, new kid on the block! 
element.classList.add("newKid");

// No more mohawk, punk is passé.
element.classList.remove("mohawk");


jQuery 3.0+: A New Hope for SVGs

jQuery launched 3.0+ versions with full support for SVG class manipulation. Time for an upgrade perhaps?

Browser Compatibility: Come Hell or High Water

Whether you use JavaScript's classList or jQuery's attr, ensure browser compatibility. For jQuery, you'd need version 3.0 or later to romp with SVGs.

Using Vanilla JS: The Pack Leader

JavaScript, despite being verbose, may provide cleaner and more reliable solutions for SVG manipulation, a terrain unfamiliar to jQuery.

Compatibility Patches: A Stitch in Time

If you are working on prehistoric codebases or browsers, use SVGAnimatedString and its baseVal property. You can define custom jQuery methods like $.fn.addClassSVG, although modern jQuery versions and JavaScript provide cleaner solutions.

Be Dynamic! Class Manipulation on the Fly

For cases that require dynamic class manipulation, leverage attr in jQuery along with replace() and classList in JavaScript.

// Outfit change for Lady Gaga's concert
var existing = $("#item").attr("class");
$("#item").attr("class", existing.includes("outfit-1") ? existing.replace(" outfit-1", "") : existing + " outfit-2");


More Ways to Manipulate SVG?

When classes don't cut it, take control with:

• Inline styles using jQuery's .css() or .attr()
• Transformation attributes like .transform()
• CSS variables and calc() for responsive designs

SVG Styling: When You Want to Go Beyond

SVGs can be styled in other ways such as with pseudo-elements, media queries or even animations. Sometimes CSS is the hero you never knew you needed.