jquery - SVG 对象上的 addClass 不起作用-6ren

jquery - SVG 对象上的 addClass 不起作用

转载作者：行者123 更新时间：2023-12-01 07:44:36

我正在尝试制作一个与动画相结合的 SVG 菜单，目前的问题是我的 jquery“addClass”实际上不会添加该类。谁能向我解释为什么？

这就是我想要创建的:当您点击主要对象时(#_ x33_)

这是我的代码:

$('#_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>

希望我能很好地解释我的问题。提前致谢!

最佳答案

类和 ID 不能以数字开头，这就是您的设计和动画不起作用的原因。

在此处阅读 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".

更改这些类名称可以解决您的问题并使您的动画正常工作。

$('#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>

关于jquery - SVG 对象上的 addClass 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41058069/

文章推荐： python - 如何修复指出字符串无法转换为 float 的值错误

jquery - 如何使用 addClass 和 removeClass 相同的 anchor 和 div .. anchor 是单击 addClass 并且元素是 addClass 事件
如何使用 anchor 点击 addClass 和元素 addClass 一对一？如何使用 jQuery add Class 和 removeClass 以及 JavaScript？ one anc
jquery - .addClass - 对象 Gold 没有方法 'addClass'
我遇到了一个小问题。尝试更改样式/添加样式时，我不断收到以下错误: Object Gold has no method 'addClass' 这是我的 .js 文件中的代码: function Ge
javascript - addClass(undefined) 与 addClass(null)
有时我想在某些情况下在链中添加类。什么值在语义上最适合不添加类？例子: $(".element").doSomething().addClass(condition ? "special-class
javascript - AngularJS $animate.addClass 没有触发 addClass 函数
我有几个使用 Angular 执行动画的实例。它们几乎相同 - 但一个有效，另一个无效 - 我无法确定第二个无效。以下是有效的指令: - 它本质上为 element 中的一堆子元素设置动画。
javascript - jQuery addClass 和标准 classList.addClass 有什么区别？
我不确定 jQuery 类方法(addClass、removeClass 和toggleClass)是否充当标准 classList 方法的包装器，它们看起来与我非常相似: http://api.jq
javascript - 如果元素高度大于 x addClass "portrait"否则 addClass "landscape"
我正在尝试编写这个脚本: 如果元素高度大于226，则addClass“portrait”，否则addClass“landscape” 我有这个: var assetHeight = $("video.
javascript - jQuery next().addClass() 和 prev().addClass() 问题
我正在尝试制作一个 slider 。我有四个内容，我把它们一个接一个地做成不可见的。然后我有一个名为 active-client 的类，它具有 display: flex 属性。我用 jQuery 的
javascript - 使用 jquery 更改 CSS 适用于 .parent().addClass 而不仅仅是 .addClass
请参阅下面的编辑。当我的验证 jquery/javascript 很差时，问题就出现了。从那以后，我实现了一个新的 css 类，它应该负责处理单个元素编辑之前所做的事情。同样，我的 jquery 验证
开始和结束之间的每个日期的javascript .addclass
我正在使用这个 website 中的 JQuery eventcalendar 插件. 我的事件有开始日期和结束日期，我有以下代码在日历上添加一个绿色方 block (一个用于开始日期，一个用于结束日
jQuery addClass 不工作
我正在尝试使用 addClass 在 Joomla 模板上提供斑马条纹表格。我使用以下代码: jQuery(function($) { $("tr:odd").addClass("od
jquery addClass() 到多个类的第一个位置
它的作用: $('p').addClass('bar'); 输出: 我需要什么: 那么是否可以将类添加到元素的第一个位置？编辑(上下文):现在最后一个类有一个分割功能。如果添加另一个类，它也会
jquery 添加淡入淡出到 .addClass
如何淡入淡出 .addClass。这是链接 - http://www.bikramyogajoondalup.com.au/about-bikram-yoga/postures-benefits.h
JavaScript 数组映射不适用于 addClass
我想创建这样的 HTML 元素我使用javascript代码$('div').append(Array(3).fill($('test')).map((el, in
javascript - addClass 动态加载的内容
我有一组按钮，默认加载时没有我希望它们具有的类(来自第 3 方站点)。每次我单击按钮时，按钮都会发生变化 - 它们是用于滚动的数字 (1 - 21)但它们并非全部同时显示。因此，在单击它们后，我一
javascript - $(this).addClass() 不起作用
我可以做 $(this).children("a").addClass("class") 并且它工作正常，但是当我做 $(this).addClass( “class”) 它不起作用。我在鼠标悬停函数
javascript - addClass 不起作用？
为什么 addClass 不起作用？单击带有 step 类的 div 时，div 背景和字体颜色应该发生变化，但没有任何反应。 .currentstep { bac
jQuery "a"addclass 帮助
我有以下 html People 其中“a”的 CSS 为 color:#999999; font-size:31px; 我正在尝试使用 jQuery 来使用只有“color:#77
jquery addClass 到所有标签
我有 Audi Select all 100 80 我尝试这样写: $(".select_all").click() { var models = $(this).parent().n
jquery.addClass() 无法添加具有不同值的已存在属性
我有一个 style="display:none" 的 div。当鼠标悬停在链接上时，我想通过添加带有 display=block 的类来显示它，但它不起作用。最佳答案你需要在类中使用!impor
jquery addClass 子选择器失败
我使用这个CSS fa-info { background-color: green; font-size: 30px; } fa-info .active { background-co

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jquery - SVG 对象上的 addClass 不起作用