我在Inkscape中设计了一个svg触发器。我想让它沿着左上角的一个固定点旋转。toggleClass函数工作，所以我的CSS一定有一个错误。我犯了一个明显的错误吗?谢谢你的帮助!
$("#pumpPath").click(function() {
$(this).toggleClass("released pressed");
});.pump pressed {
animation: pressPump 1s;
}
@keyframes pressPump {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
}
}
.pump released {
animation: pressPump 1s;
}
@keyframes pressPump {
0% {
transform: rotate(45deg);
transform-origin: top left;
}
100% {
transform: rotate(0deg);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg>
<g
inkscape:groupmode="layer"
inkscape:label="Image"
id="g18"
transform="translate(-25.228074,50.926481)">
<path id="pumpPath" class="pump released"
d="m 157,-24.996944 5.5232,0.04031 a 2.9460419,2.9460419 45.938035 0 1 2.92359,3.020921 l -0.74066,29.1006192 a 37.585303,37.585303 86.894374 0 0 0.32403,5.9721938 l 0.31135,2.312139 a 28.399823,28.399823 76.300744 0 0 1.41309,5.797059 l 5.75786,16.055202 a 0.89068854,0.89068854 143.73474 0 1 -1.3769,1.010147 l -2.18338,-1.657206 a 15.29309,15.29309 48.297403 0 1 -3.91693,-4.395867 l -4.25696,-7.19697 a 26.223134,26.223134 65.922438 0 1 -2.43197,-5.442465 l -2.11417,-6.684476 a 50.289884,50.289884 75.862746 0 1 -1.46287,-5.807956 l -0.94089,-4.9683892 a 4.4404149,4.4404149 45.233178 0 0 -3.50117,-3.5297862 L 134.94297,-4.4147688 A 3.6515921,3.6515921 50.594862 0 1 132,-7.996944 2.5520083,2.5520083 146.26953 0 1 135,-10 l 15.89061,-0.01619 a 3.0250546,3.0250546 135.17989 0 0 3.02189,-3.002976 l 0.0657,-8.999752 A 3.0000019,3.0000019 135.41813 0 1 157,-24.996944 Z"
id="path24"
sodipodi:nodetypes="ccccccccccccc"
inkscape:original-d="m 154.00008,-25.018836 11.52304,0.08409 -0.89332,35.098677 1.11207,8.258469 7.78332,21.70299 -6.96264,-5.2847 L 159.25099,22.47948 155.32748,10.074314 153.27019,-0.78929718 132,-4.996944 v -4.9999999 l 21.89061,-0.0223 z"
inkscape:path-effect="#path-effect25" />
</g>
</svg>你犯了一些基本的错误，比如类名和同名动画。就像你使用.pump pressed一样，你需要使用.pump.pressed，因为两个类都指向相同的元素，然后它们组合成一个字符串，后跟一个点.第二，为动画pressPump分配相同的名称。
希望现在的事情和错误都向你澄清了。
$("#pumpPath").click(function() {
$(this).toggleClass("released pressed");
});.pump.pressed {
animation: pressPump1 1s;
}
@keyframes pressPump1 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
}
}
.pump.released {
animation: pressPump2 1s;
}
@keyframes pressPump2 {
0% {
transform: rotate(45deg);
transform-origin: top left;
}
100% {
transform: rotate(0deg);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg>
<g
inkscape:groupmode="layer"
inkscape:label="Image"
id="g18"
transform="translate(-25.228074,50.926481)">
<path id="pumpPath" class="pump released"
d="m 157,-24.996944 5.5232,0.04031 a 2.9460419,2.9460419 45.938035 0 1 2.92359,3.020921 l -0.74066,29.1006192 a 37.585303,37.585303 86.894374 0 0 0.32403,5.9721938 l 0.31135,2.312139 a 28.399823,28.399823 76.300744 0 0 1.41309,5.797059 l 5.75786,16.055202 a 0.89068854,0.89068854 143.73474 0 1 -1.3769,1.010147 l -2.18338,-1.657206 a 15.29309,15.29309 48.297403 0 1 -3.91693,-4.395867 l -4.25696,-7.19697 a 26.223134,26.223134 65.922438 0 1 -2.43197,-5.442465 l -2.11417,-6.684476 a 50.289884,50.289884 75.862746 0 1 -1.46287,-5.807956 l -0.94089,-4.9683892 a 4.4404149,4.4404149 45.233178 0 0 -3.50117,-3.5297862 L 134.94297,-4.4147688 A 3.6515921,3.6515921 50.594862 0 1 132,-7.996944 2.5520083,2.5520083 146.26953 0 1 135,-10 l 15.89061,-0.01619 a 3.0250546,3.0250546 135.17989 0 0 3.02189,-3.002976 l 0.0657,-8.999752 A 3.0000019,3.0000019 135.41813 0 1 157,-24.996944 Z"
id="path24"
sodipodi:nodetypes="ccccccccccccc"
inkscape:original-d="m 154.00008,-25.018836 11.52304,0.08409 -0.89332,35.098677 1.11207,8.258469 7.78332,21.70299 -6.96264,-5.2847 L 159.25099,22.47948 155.32748,10.074314 153.27019,-0.78929718 132,-4.996944 v -4.9999999 l 21.89061,-0.0223 z"
inkscape:path-effect="#path-effect25" />
</g>
</svg>