我目前有以下 SVG:
<svg class="tower owner" height="60" width="60" viewBox="0 0 300 300">
<g transform="translate(75 75)" opacity="1">
<ellipse class="border" cx="0" cy="0" fill="#222" rx="65" ry="65" stroke-width="5"></ellipse>
<g class="rotatable" style="transform: rotate(5.497787143782138rad); transition: transform 2s;">
<rect fill="#aaa" height="50" stroke-width="7" stroke="#181818" width="40" x="-20" y="-80"></rect>
<rect fill="#555" height="58" rx="12" ry="10" width="78" x="-39" y="-25"></rect>
<rect fill="#ffe56d" height="46.4" y="-13.399999999999999" rx="12" ry="12" width="78" x="-39"></rect>
</g>
</g>
</svg>
我目前正在 g.rotatable
上制作旋转动画但是我想用 <animateTransform>
如果可能的话,我还没弄清楚怎么做。
我试过将它放在组的开头、底部,甚至在它之后,但是没有任何影响。
<animateTransform attributeName="transform" attributeType="XML" dur="5s" keyTimes="0;0.4;0.75;1" repeatCount="indefinite" type="rotate" values="315deg;90deg;200deg;315deg" calcMode="linear"></animateTransform>
由于我从未真正使用过 SVG 或为它们制作动画,所以我不确定我哪里出错了。
svg.tower .rotatable {
animation: tower 5s linear infinite;
}
@keyframes tower {
0% {
transform: rotate(315deg);
}
40% {
transform: rotate(90deg);
}
75% {
transform: rotate(200deg);
}
100% {
transform: rotate(315deg);
}
}
上面是我当前的 CSS 动画。
任何人都可以告诉我哪里出错了,这样我就可以改正我的错误,或者如果可能的话,这样我就有可能放弃这一行动。
最佳答案
Note: You may want to reconsider using SMIL animations instead of CSS animations because Chrome has deprecated support for SMIL animations from v45.
您的代码中存在两个问题,如下所示:
rotate
transform在 SVG 中,只需将度数作为值,不需要向其添加deg
后缀。此外,还可以指定变换原点(第 2nd 和第 3rd 参数),但这不是强制性的。- 在
.rotatable
元素上有一个style='transform: rotate(...)'
。 CSS 覆盖了animateTransform
,因此您看不到任何旋转。避免这种style
设置。如果需要初始旋转,您可以使用 SVG 的transform
属性。
下面是一个工作演示:
<svg class="tower owner" height="60" width="60" viewBox="0 0 300 300">
<g transform="translate(75 75)" opacity="1">
<ellipse class="border" cx="0" cy="0" fill="#222" rx="65" ry="65" stroke-width="5"></ellipse>
<g class="rotatable" transform="rotate(315)">
<rect fill="#aaa" height="50" stroke-width="7" stroke="#181818" width="40" x="-20" y="-80"></rect>
<rect fill="#555" height="58" rx="12" ry="10" width="78" x="-39" y="-25"></rect>
<rect fill="#ffe56d" height="46.4" y="-13.399999999999999" rx="12" ry="12" width="78" x="-39"></rect>
<animateTransform attributeName="transform" attributeType="XML" dur="5s" keyTimes="0;0.4;0.75;1" repeatCount="indefinite" type="rotate" values="315;90;200;315" calcMode="linear"></animateTransform>
</g>
</g>
</svg>
关于css - 动画 SVG 组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41872057/