在SVG對象上的addClass不工作

我想使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>

希望我解釋我的問題夠好。在此先感謝！

來源

2016-12-09 ImagineAndCreate

調用'addClass' – TryingToImprove

我，當我拼命試圖使其工作時，不要加前綴'.'類名。對不起。 @TryingTolmprove – ImagineAndCreate

可能重複：http://stackoverflow.com/questions/8638621/jquery-svg-why-cant-i-addclass – Draval

類和ID不能以數字開頭，這就是爲什麼你的設計和動畫不起作用。

從W3 Documentation

在CSS中讀到這裏，標識符（包括元素名稱，類別，並在選擇的ID）只能包含字符[a-zA-Z0-9]和ISO 10646字符U + 00A0及更高，加上連字符（-）和下劃線（_）; 它們不能以數字，兩個連字符或連字符開頭，後跟數字。標識符也可以包含轉義字符和任何ISO 10646字符作爲數字代碼（參見下一項）。例如，標識符「B&W?」可以寫爲「B\&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>

來源

2016-12-09 10:27:51 Stewartside

你好！謝謝回答我的問題。我改變了它，但它不能解決我的問題。我已經嘗試了很多，花了整整一天時間改變我的代碼，以使其工作。它只是不會添加類。從您的答案中查看代碼片段。點擊主多邊形時，多邊形不會縮放和平移。：/ – ImagineAndCreate

jQuery AddClass函數不使用SVG ...請參閱上面的帖子評論以獲取更多信息。 – Draval

@Draval老版本的jQuery不能將類添加到SVG，但最新版本可以。你鏈接到的「欺騙」是4歲.... – Stewartside

在SVG對象上的addClass不工作

回答

相關問題