使用 SMIL 链接两个 <animateTransform>答案

【问题标题】：Chaining two <animateTransform>s using SMIL使用 SMIL 链接两个 <animateTransform>
【发布时间】：2017-08-30 18:50:17
【问题描述】：

我试图让我的 SVG 中的两个动画一个接一个地运行。

这就是它们的编写方式。它们被写成一个组，里面有一些原语。我正在尝试让整个小组旋转然后翻译。

但是当我运行它时，变换似乎在第一个动画结束时重置

    <animateTransform attributeName="transform"
                      id="anim1" 
                      type="rotate"
                      from="0 72 72"
                      to="40 72 72"
                      begin="0s; anim2.end"
                      dur="1s"
                      fill="freeze" repeatCount="1" />
    <animateTransform attributeName="transform"
                      id="anim2"
                      type="translate"
                      from="0 0"
                      to="10 0"
                       begin="anim1.end" dur="0.4s" fill="freeze"/>

【问题讨论】：

似乎不太可能，在任何给定时间只有一个转换：codepen.io/chriscoyier/post/examples-of-animatetransform;您可以改为沿着路径移动它，或者可以为组设置动画（？）
repeatCount 在第二个 animateTransform 中丢失，因此它不应该执行任何操作，因为该属性是强制性的（除非您指定 repeateDur）。
也许你可以用文字描述一下你希望它是什么样子？
"repeatCount...应该什么都不做，因为该属性是强制性的" - that 不是说如果没有repeatCount、repeatDur 和end 时使用简单的持续时间（因此，一次重复）定义了吗？

标签： svg smil

【解决方案1】：

定义additive="sum" 以应用一个转换on top of the other。

所以如果你想从第一个动画的结束点开始第二个动画，给第二个动画添加属性。动画链接的方式，然后第一个动画将重新开始。如果您希望它从第二个动画的最终位置重新开始，请将该属性也添加到第一个动画。

【讨论】：

当然，第二个动画将在第一个动画应用的旋转坐标系中运行。我不知道这是否是 OP 所期望的。
@RobertLongson。这不是我所期望的，但我可以轻松地修改转换来解决这个问题
我在代码的什么地方定义了加法和？哪个元素？
如果将属性添加到<animateTransform> 标记，它会将动画应用于每个基础值。如果动画元素具有transform 属性，它将添加到该属性中。如果另一个动画更早运行，它将添加到其最终值。如果两个动画并行运行，则通过将两个变换矩阵相乘来计算结果值。