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!

Answer 1

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>