Jquery Svg, Why Can't I Addclass

jQuery SVG, why can't I addClass?

Edit 2016: read the next two answers.

JQuery 3 fixes the underlying issue
Vanilla JS: element.classList.add('newclass') works in modern browsers

JQuery (less than 3) can't add a class to an SVG.

.attr() works with SVG, so if you want to depend on jQuery:

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

And if you don't want to depend on jQuery:

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

jQuery .addClass() and SVG element

As posted in jQuery SVG, why can't I addClass?

addClass doesn't work on svg.

You can use .attr('class', 'wolne')

addClass on SVG object isn't working

Classes and ID's cannot start with a number and this is why your design and animation is not working.

Read here from the W3 Documentation

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

Changing these class names fixes your issue and makes your animation work.

$('#x33_').click(function() {  $('#x32_').addClass('ani32');  $('#x34_').addClass('ani34');  $('#x35_').addClass('ani35');  $('#x31_').addClass('ani31');});

html {  overflow: hidden;}body {  text-align: center;}svg {  margin-top: 50px;  width: 80%;}polygon {  transform-origin: 50% 50%;}#x31_ {  animation: move 4s ease forwards;}#x32_ {  animation: move2 4s ease forwards;}#x33_ {  cursor: pointer;  animation: move3 4s ease forwards;}#x34_ {  animation: move4 4s ease forwards;}#x35_ {  animation: move5 4s ease forwards;}@keyframes move {  0% {    transform: none;    fill-opacity: 0;    stroke-width: 5;  }  10% {    transform: none;    fill-opacity: 0;    stroke-width: 5;  }  20% {    transform: translatex(-30px) translatey(15px);    fill-opacity: 0;    stroke-width: 5;    stroke-width: 5;  }  30% {    transform: rotate(241deg) translatex(0px) translatey(-40px) scale(0.9, 0.9);    fill-opacity: 0;    stroke-width: 10;  }  40% {    transform: rotate(241deg) translatex(-2px) translatey(134px) scale(0.5, 0.5);    stroke-width: 10;    fill-opacity: 1;  }  50% {    transform: rotate(241deg) translatex(-2px) translatey(134px) scale(0.5, 0.5);    stroke-width: 10;    fill-opacity: 1;  }  60% {    transform: rotate(241deg) translatex(-2px) translatey(134px) scale(0.5, 0.5);    stroke-width: 10;    fill-opacity: 1;  }  70% {    transform: rotate(241deg) translatex(-2px) translatey(134px) scale(0.5, 0.5);    stroke-width: 10;    fill-opacity: 1;  }  80% {    transform: rotate(241deg) translatex(-2px) translatey(134px) scale(0.5, 0.5);    stroke-width: 10;    fill-opacity: 1;  }  90% {    transform: rotate(241deg) translatex(-2px) translatey(134px) scale(0.5, 0.5);    stroke-width: 10;    fill-opacity: 1;  }  100% {    transform: rotate(241deg) translatex(-2px) translatey(134px) scale(0.5, 0.5);    stroke-width: 10;    fill-opacity: 1;  }}@keyframes move2 {  0% {    transform: none;    fill-opacity: 0;    stroke-width: 5;  }  10% {    transform: none;    fill-opacity: 0;    stroke-width: 5;  }  20% {    transform: translatex(-30px) translatey(-15px);    fill-opacity: 0;    stroke-width: 5;  }  30% {    transform: rotate(241deg) translatex(30px) translatey(-25px) scale(0.9, 0.9);    stroke-width: 10;    fill-opacity: 0;  }  40% {    transform: rotate(241deg) translatex(-120px) translatey(60px) scale(0.5, 0.5);    stroke-width: 10;    fill-opacity: 1;  }  50% {    transform: rotate(241deg) translatex(-120px) translatey(60px) scale(0.5, 0.5);    stroke-width: 10;    fill-opacity: 1;  }  60% {    transform: rotate(241deg) translatex(-120px) translatey(60px) scale(0.5, 0.5);    stroke-width: 10;    fill-opacity: 1;  }  70% {    transform: rotate(241deg) translatex(-120px) translatey(60px) scale(0.5, 0.5);    stroke-width: 10;    fill-opacity: 1;  }  80% {    transform: rotate(241deg) translatex(-120px) translatey(60px) scale(0.5, 0.5);    stroke-width: 10;    fill-opacity: 1;  }  90% {    transform: rotate(241deg) translatex(-120px) translatey(60px) scale(0.5, 0.5);    stroke-width: 10;    fill-opacity: 1;  }  100% {    transform: rotate(241deg) translatex(-120px) translatey(60px) scale(0.5, 0.5);    stroke-width: 10;    fill-opacity: 1;  }}@keyframes move3 {  0% {    transform: none;    fill-opacity: 0;    stroke-width: 5;  }  10% {    transform: none;    fill-opacity: 0;    stroke-width: 5;  }  20% {    transform: rotate(0deg);    fill-opacity: 0;    stroke-width: 5;  }  30% {    transform: rotate(-119deg) scale(0.9, 0.9);    stroke-width: 10;    fill-opacity: 1;  }  40% {    transform: rotate(-119deg) scale(2.5, 2.5);    stroke-width: 10;    fill-opacity: 1;  }  50% {    transform: rotate(-119deg) scale(2.5, 2.5);    stroke-width: 10;    fill-opacity: 1;  }  60% {    transform: rotate(-119deg) scale(2.5, 2.5);    stroke-width: 10;    fill-opacity: 1;  }  70% {    transform: rotate(-119deg) scale(2.5, 2.5);    stroke-width: 10;    fill-opacity: 1;  }  80% {    transform: rotate(-119deg) scale(2.5, 2.5);    stroke-width: 10;    fill-opacity: 1;  }  90% {    transform: rotate(-119deg) scale(2.5, 2.5);    stroke-width: 10;    fill-opacity: 1;  }  100% {    transform: rotate(-119deg) scale(2.5, 2.5);    stroke-width: 10;    fill-opacity: 1;  }}@keyframes move4 {  0% {    transform: none;    fill-opacity: 0;    stroke-width: 5;  }  10% {    transform: none;    fill-opacity: 0;    stroke-width: 5;  }  20% {    transform: translatex(30px) translatey(-15px);    fill-opacity: 0;    stroke-width: 5;  }  30% {    transform: rotate(241deg) translatex(0px) translatey(35px) scale(0.9, 0.9);    stroke-width: 10;    fill-opacity: 0;  }  40% {    transform: rotate(241deg) translatex(-5px) translatey(-140px) scale(0.5, 0.5);    stroke-width: 10;    fill-opacity: 1;  }  50% {    transform: rotate(241deg) translatex(-5px) translatey(-140px) scale(0.5, 0.5);    stroke-width: 10;    fill-opacity: 1;  }  60% {    transform: rotate(241deg) translatex(-5px) translatey(-140px) scale(0.5, 0.5);    stroke-width: 10;    fill-opacity: 1;  }  70% {    transform: rotate(241deg) translatex(-5px) translatey(-140px) scale(0.5, 0.5);    stroke-width: 10;    fill-opacity: 1;  }  80% {    transform: rotate(241deg) translatex(-5px) translatey(-140px) scale(0.5, 0.5);    stroke-width: 10;    fill-opacity: 1;  }  90% {    transform: rotate(241deg) translatex(-5px) translatey(-140px) scale(0.5, 0.5);    stroke-width: 10;    fill-opacity: 1;  }  100% {    transform: rotate(241deg) translatex(-5px) translatey(-140px) scale(0.5, 0.5);    stroke-width: 10;    fill-opacity: 1;  }}@keyframes move5 {  0% {    transform: none;    fill-opacity: 0;    stroke-width: 5;  }  10% {    transform: none;    fill-opacity: 0;    stroke-width: 5;  }  20% {    transform: translatex(0px) translatey(-30px);    fill-opacity: 0;    stroke-width: 5;  }  30% {    transform: rotate(241deg) translatex(30px) translatey(15px) scale(0.9, 0.9);    stroke-width: 10;    fill-opacity: 0;  }  40% {    transform: rotate(241deg) translatex(-120px) translatey(-70px) scale(0.5, 0.5);    stroke-width: 10;    fill-opacity: 1;  }  50% {    transform: rotate(241deg) translatex(-120px) translatey(-70px) scale(0.5, 0.5);    stroke-width: 10;    fill-opacity: 1;  }  60% {    transform: rotate(241deg) translatex(-120px) translatey(-70px) scale(0.5, 0.5);    stroke-width: 10;    fill-opacity: 1;  }  70% {    transform: rotate(241deg) translatex(-120px) translatey(-70px) scale(0.5, 0.5);    stroke-width: 10;    fill-opacity: 1;  }  80% {    transform: rotate(241deg) translatex(-120px) translatey(-70px) scale(0.5, 0.5);    stroke-width: 10;    fill-opacity: 1;  }  90% {    transform: rotate(241deg) translatex(-120px) translatey(-70px) scale(0.5, 0.5);    stroke-width: 10;    fill-opacity: 1;  }  100% {    transform: rotate(241deg) translatex(-120px) translatey(-70px) scale(0.5, 0.5);    stroke-width: 10;    fill-opacity: 1;  }}#x32_.ani32 {  animation: ani32 4s ease forwards;}#x34_.ani34 {  animation: ani34 4s ease forwards;}#x35_.ani35 {  animation: ani35 4s ease forwards;}#x31_.ani31 {  animation: ani31 4s ease forwards;}@keyframes ani32 {  from {    transform: translatex(-2px) translatey(134px) scale(0.5, 0.5);  }  to {    transform: translatex(32px) translatey(-380px) scale(2, 2);  }}@keyframes ani34 {  from {    transform: translatex(-5px) translatey(-140px) scale(0.5, 0.5);  }  to {    transform: rotate(0deg) scale(2) skew(0deg) translate(100px);  }}@keyframes ani35 {  from {    transform: translatex(-120px) translatey(-70px) scale(0.5, 0.5);  }  to {    transform: translatex(-400px) translatey(-500px) scale(2, 2);  }}@keyframes ani31 {  from {    transform: translatex(-2px) translatey(134px) scale(0.5, 0.5);  }  to {    transform: translatex(-501px) translatey(109px) scale(2, 2);  }}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2083.4 1075.8" style="enable-background:new 0 0 2083.4 1075.8;" xml:space="preserve">  <polygon id="x35_" style="fill:#36ABF2;stroke:#36ABF2;stroke-width:5;stroke-miterlimit:10;" points="1003.4,341.3 965,272.3     1003.4,203.3 1080,203.3 1118.4,272.3 1080,341.3   " />  <polygon id="x34_" style="fill:#36ABF2;stroke:#36ABF2;stroke-width:5;stroke-miterlimit:10;" points="1118.4,409.3 1080.1,341.3     1118.4,273.3 1195.1,273.3 1233.4,341.3 1195.1,409.3   " />  <polygon id="x32_" style="fill:#36ABF2;stroke:#36ABF2;stroke-width:5;stroke-miterlimit:10;" points="888.3,409.3 850,341.3     888.3,273.3 965,273.3 1003.3,341.3 965,409.3  " />  <polygon id="x31_" style="fill:#36ABF2;stroke:#36ABF2;stroke-width:5;stroke-miterlimit:10;" points="888.3,548.3 850,478.8     888.3,409.3 965,409.3 1003.3,478.8 965,548.3  " />  <polygon id="x33_" style="fill:#36ABF2;stroke:#36ABF2;stroke-width:5;stroke-miterlimit:10;" points="1003.4,480.3 965,410.8     1003.4,341.3 1080,341.3 1118.4,410.8 1080,480.3   " /></svg>

How to add a class to a svg path?

$("button").on("click", function() {
    var periodClass = $(this).parent().attr("class");
    $("svg path").each(function() {
        var cl = $(this).attr('class');
        $(this).attr('class', cl.includes(periodClass) ? cl + ' active' : cl.replace(/active/g, ''));
    });
});

check this fiddle

jQuery .hasClass() method fails for SVG elements

The class attribute for HTML element doesn't have the same meaning in SVG.

$("<b></b>").addClass($(this).attr("class")).hasClass("node")

/(^|\s)node(\s|$)/.test($(this).attr("class"))

for SVG elements.

EDIT .hasClass seems to work just fine (at least in IE9 and FF) http://jsfiddle.net/X6BPX/1/

So the problem could be any combination of the following: a syntax error, using an outdated browser, using an outdated version of jQuery.

Why can't jQuery directly manipulate the class of an SVG element?

@Paul's answer made me wonder a bit because the code I took was from the current source on GitHub. I double checked just in case I did pull from an older version, and sure enough it was the latest. So, I decided to double check the release notes for 3.0.0 a1, and I found my answer. Apparently the jQuery team decided to ever so slightly change their stance on the Won't Fix policy and allow direct manipulation of SVG elements' class attributes. That is the code that's currently up there now and what I was copying.

Here's the discussion thread and commit for reference. So, jQuery does do class manipulation by default, it's just in the next version. For what I'm working on, I don't mind going to the alpha so it works out for me.

I'll still be making my own plug in for SVG specific tasks which are specific to my needs, but with the class issue resolved, it should be much easier now.

Why is addClass not recognised as a function in this case?

jQuery allows you to perform it's API methods not only on single elements, but also on collections of elements (which is one of the nice advantages over the native DOM API).

The easiest way to achieve your goal is to capitalize on that:

var pdfs = jQuery("a[href$='.pdf']"); //Choosing .pdf links
pdfs.addClass("pdf"); // Adding the class

jQuery $.each() function is for those cases where you want to do something with each element in the collection that is not available as an API method in jQuery. It expects you pass it a function that gets passed the current element in each iteration as this:

var pdfs = jQuery("a[href$='.pdf']"); //Choosing .pdf links
pdfs.each(function() { console.log(this.href); }) // perform something jQuery doesn't offer as an API method

If you insist on using $.each(), the code is this:

var pdfs = jQuery("a[href$='.pdf']"); //Choosing .pdf links
pdfs.each(function() { $(this).addClass("pdf"); }); // Adding the class

Jquery Svg, Why Can't I Addclass