使用 animateTransform 为 SVG 设置动画

【问题标题】：Animate SVG with animateTransform使用 animateTransform 为 SVG 设置动画
【发布时间】：2020-04-26 11:22:44
【问题描述】：

尝试使用 skewX 为 SVG 元素设置动画。但是，它的工作方式并不完全符合我的要求。

现在：底部向左移动
目标：上部应改为向右移动（底部保持原位）

我尝试使用transform-origin，但没有成功。任何想法如何解决这个谜团？

<svg xmlns="http://www.w3.org/2000/svg" width="102" height="102" viewBox="-50 -50 102 102">
  <g>

    <rect width="10%" height="50%"
    style="fill:none; stroke:red; stroke-with:3;">

    <animateTransform
      attributeName="transform"
      attributeType="XML"
      type="skewX"
      from="0"
      to="-20"
      begin="0.5s"
      dur="0.2s"
      repeatCount="1"
      fill="freeze"
      id="fallen"/>

    </rect>
  </g>
</svg>

【问题讨论】：

标签： svg svg-animate

【解决方案1】：

在底部向左移动的同时，使用另一个变换将整个物体向右移动。

<svg xmlns="http://www.w3.org/2000/svg" width="102" height="102" viewBox="-50 -50 102 102">
  <g>

    <rect width="10%" height="50%"
    style="fill:none; stroke:red; stroke-with:3;">

    <animateTransform
      attributeName="transform"
      attributeType="XML"
      type="skewX"
      from="0"
      to="-20"
      begin="0.5s"
      dur="0.2s"
      repeatCount="1"
      fill="freeze"
      id="fallen"/>
   <animateTransform
      attributeName="transform"
      attributeType="XML"
      type="translate"
      from="0"
      to="20"
      begin="0.5s"
      dur="0.2s"
      repeatCount="1"
      fill="freeze"
      additive="sum"/>

    </rect>
  </g>
</svg>

【讨论】：

非常感谢@Robert。这是我的问题的解决方案。后续问题：如果我使用徽标中的其他元素运行动画，则倾斜与翻译有某种冲突（未执行翻译）。知道为什么吗？欢迎任何答案：stackoverflow.com/questions/61441154/…