在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不工作

回答

相关问题