如何从上一个位置开始，分几步旋转一个元素？
如何从上一个位置开始，分几步旋转一个元素？
提问于 2021-07-21 07:27:19
我有以下SVG文档：https://jsfiddle.net/724vgh5z/
我希望每次红色矩形完成一个完整的圆时，蓝色矩形旋转6度。
它几乎可以工作，但蓝色矩形总是从0度开始。我希望蓝色矩形像这样执行旋转：0 -> 6, 6-> 12, 12 -> 18, ...，我不能硬编码所有的旋转，因为会有很多旋转。
Stack Overflow用户
发布于 2021-09-26 00:52:38
我回答我自己的问题：
在<g>容器中添加另一个动画变换：
https://jsfiddle.net/82fxqc6e/
<svg width="200" height="200">
<g transform="translate(100 100)">
<g>
<animateTransform type="rotate" values="45" begin="2.5s"
calcMode="discrete" dur="2.5s" additive="sum" accumulate="sum"
repeatCount="indefinite" />
<rect .../>
</g>
...
</g>
</svg>诀窍是使用calcMode="discrete"和values="...“属性。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68462405
复制相关文章
相似问题
腾讯云开发者
