使用animateTransform制作SVG动画

问题描述 投票:0回答:1

[尝试使用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个回答
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>
© www.soinside.com 2019 - 2024. All rights reserved.