如何从最后一个位置开始分几步旋转元素？

【问题标题】：How to rotate an element in several steps, starting from last position?如何从最后一个位置开始分几步旋转元素？
【发布时间】：2021-09-28 09:51:13
【问题描述】：

我有以下 SVG 文档： https://jsfiddle.net/724vgh5z/

我希望红色矩形每转一圈，蓝色矩形就旋转 6 度。

它几乎可以工作，但蓝色矩形总是从 0 度开始。我希望蓝色矩形执行这样的旋转：0 -> 6, 6-> 12, 12 -> 18, ... 我无法对所有旋转进行硬编码，因为它们会很多。

【问题讨论】：

标签： svg rotation svg-animate

【解决方案1】：

我回答我自己的问题：

在 <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="..." 属性。

【讨论】：