SVG动画如何累积应用值

Question

我正在做一些工作，需要从 javascript 中旋转一些 SVG 中的元素。为此，我一直在测试如何设置 SVG 项目，定义动画，然后基于任意事件运行动画，在 SVG 本身之外（来自 js）。在动画运行之前，我设置了旋转的度数以及我希望旋转发生的速度。

这一切都很好。

我的问题是动画完成后，svg 会恢复到原始状态。这意味着如果我将 SVG 旋转到 90 度，当动画完成时，SVG 会立即恢复到 0 度。

我查看了w3.org 的 svg 文档，特别是加法和累积选项，但它们似乎对我不起作用。

我确定这是微不足道的问题，但我看不出问题的原因。

JSfiddle example of the problem

感谢罗伯特，我找到了解决方案。我在下面添加了解决方案。

JSfiddle example of the solution

Answer 1

将 fill="freeze" 添加到 animateTransform 元素。