1
SVGメニューをアニメーションと組み合わせてみようとしていますが、現時点で問題になっているのは、私のjQuery "addClass"が実際にクラスを追加しないということです。誰も私になぜ説明することができますか？SVGオブジェクトの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' – TryingToImprove
を呼び出すときに、私は必死にそれを動作させるためにしようとしていた時にやったことを' .'でプレフィックスにクラス名を追加しないでください。すみません。 @TryingTolmprove – ImagineAndCreate
可能重複：http://stackoverflow.com/questions/8638621/jquery-svg-why-cant-i-addclass – Draval