使用 animateTransform 动画 SVG [英] Animate SVG with animateTransform

问题描述

尝试使用 skewX 为 SVG 元素设置动画.然而，它的工作方式并不完全是我想要的方式.

Trying to animate an SVG element with the skewX. It works, however, not exactly the way I want it to.

• 现在:底部向左移动
• 目标:上部应该向右移动(底部保持原位)

我尝试使用 transform-origin 但它没有用.任何想法如何解决这个谜团?

I tried with transform-origin but it didn't work. Any ideas how to solve this mystery?

<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>

推荐答案

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

Use another transform to move the whole thing to the right at the same time as the bottom moves left.

<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>

这篇关于使用 animateTransform 动画 SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！