Animate SVG с помощью animateTransform - PullRequest
Новая
       56

Animate SVG с помощью animateTransform

0 голосов
/ 26 апреля 2020

Попытка анимировать элемент SVG с помощью skewX. Это работает, однако, не совсем так, как я хочу.

  • Теперь: нижняя часть сдвигается влево
  • Цель: верхняя часть должна двигаться вправо (а нижняя остается на месте)

Я пытался с 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>

1 Ответ

2 голосов
/ 26 апреля 2020

Используйте другое преобразование, чтобы переместить все это вправо в то же самое время, когда нижнее перемещается влево. 

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