SVG 对象上的 addClass 不起作用

【问题标题】：addClass on SVG object isn't workingSVG 对象上的 addClass 不起作用
【发布时间】：2017-04-24 19:02:40
【问题描述】：

我正在尝试制作一个结合动画的 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>

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

【问题讨论】：

  • 调用addClass时不要在类名前加上.前缀
  • 当我拼命想让它发挥作用时，我这样做了。对不起。 @TryingTolmprove
  • 可能重复：stackoverflow.com/questions/8638621/…
  • 我之前看过这篇文章并尝试过 .attr ，将其更改为 .attr 并不能解决我的问题。 @Draval

标签： jquery css svg css-animations css-shapes


【解决方案1】：

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

从W3 Documentation阅读这里

在 CSS 中，标识符（包括选择器中的元素名称、类和 ID）只能包含字符 [a-zA-Z0-9] 和 ISO 10646 字符 U+00A0 及更高，加上连字符 (-) 和下划线 (@ 987654324@); 它们不能以数字、两个连字符或一个连字符后跟一个数字开头。标识符还可以包含转义字符和任何 ISO 10646 字符作为数字代码（请参阅下一项）。例如，标识符“B&amp;W?”可以写成“B\&amp;W\?”或“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>

【讨论】：

  • 您好！谢谢回答我的问题。我改变了它，但它不会解决我的问题。我已经尝试了很多，花了一整天的时间更改我的代码只是为了让它工作。它只是不会添加课程。从您的答案中查看代码 sn-p。单击主多边形时，多边形不会缩放和平移。 ://
  • jQuery AddClass 函数不适用于 SVG...请参阅上面的帖子评论了解更多信息。
  • @Draval 旧版本的 jQuery 无法向 SVG 添加类，但最新版本可以。您链接到的“骗子”是 4 岁....
  • @ImagineAndCreate 在重新阅读文档后更新了我的答案。只有 a-zA-z 字符可以开始一个 ID 或类。
  • @Stewartside：这是我的错误……没有使用 jQuery V3.1.1 进行检查
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2023-03-21
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-05-23
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode