addClass on SVG object isn't working

Question

I'm trying to make an SVG menu combined with animations, the problem at the moment is that my jquery "addClass" won't actually add the class. Can anyone explain to me why?

This is what i'm trying to create: When you click on the main object (#_ x33_)

This is my code:

$('#_x33_').click(function() {
  $('#_x32_').addClass('32ani');
  $('#_x34_').addClass('34ani');
  $('#_x35_').addClass('35ani');
  $('#_x31_').addClass('31ani');
});

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;
  }
}
.32ani {
  animation: ani32 4s ease forwards;
}
.34ani {
  animation: ani34 4s ease forwards;
}
.35ani {
  animation: ani35 4s ease forwards;
}
.31ani {
  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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.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>

Hope i explained my problem good enough. Thanks in advance!

Don't add prefix the class name with `.` when calling `addClass` — TryingToImprove, Dec 09 '16 at 10:21
I did that when i was desperately trying to make it work. Excuse me for that. @TryingTolmprove — Darudes Zedstorm, Dec 09 '16 at 10:29
Possible Duplicate : http://stackoverflow.com/questions/8638621/jquery-svg-why-cant-i-addclass — Draval, Dec 09 '16 at 10:41
I've seen this post before and tried .attr already, changing it to .attr won't fix my problem. @Draval — Darudes Zedstorm, Dec 09 '16 at 10:50

Stewartside · Accepted Answer · 2016-12-09T10:54:19.880

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>

Hi there! Thanks for answering my question. I changed it but it won't fix my problem. I've tried a lot, spend a whole day changing my code just to make it work. It just won't add the class. See the code snippet from your answer. The polygons wont scale and translate when you click on the main polygon. :/ — Darudes Zedstorm, Dec 09 '16 at 10:45
jQuery AddClass function dont working with SVG... Please see the above post comment for more info. — Draval, Dec 09 '16 at 10:45
@Draval the old version of jQuery cannot add classes to SVG but the newest versions can. The "dupe" you linked to is 4 years old.... — Stewartside, Dec 09 '16 at 10:50
@ImagineAndCreate Updated my answer after re-reading the docs. Only a-zA-z charcters can start an ID or Class. — Stewartside, Dec 09 '16 at 10:52
@Stewartside: it my mistake... not checked with jQuery V3.1.1 — Draval, Dec 09 '16 at 10:59
Thank you very much. That didn't even came to my mind. @Stewartside — Darudes Zedstorm, Dec 09 '16 at 11:00

addClass on SVG object isn't working

1 Answers1