Как сделать анимация svg?

Рейтинг: 0Ответов: 2Опубликовано: 05.02.2023

Как анимировать svg так чтобы поэтапно вырисовывался слева на право? А не сразу все углы

svg {
    stroke: violet;
    stroke-width: 2px;
    stroke-dasharray: 149;
    animation: path 3s linear forwards;
  }
  
   @keyframes path {
      0% {
        stroke-dashoffset: 149;
      }
      100% {
        stroke-dashoffset: 0;
      }
    }
<svg width="42" height="22" viewBox="0 0 42 22" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M0 11.5H40M40 11.5L32 1.5M40 11.5L32 20.5"/>
</svg>

svg svg-animation
Источник: Stack Overflow на русском

Ответы

▲ 0

Вам необходимо разложить данную стрелку на 3 path После чего сделать 3 движения stroke-dashoffset. Анимацию для крыльев запускать с небольшим запозданием относительно анимации основной линии.

▲ 0

Рисуем path и вставляем галочку как продолжение path M20,50 180,50 M160,30 180,50 160,70и потом mask применяем к rect и анимируем этот rect => смотрите результат

<svg viewBox="0 0 200 100" width="200px">
  <defs>
    <mask id="mask">
        <path d="M20,50 180,50 M160,30 180,50 160,70" fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
    </mask>
  </defs>
  <rect fill="#000" width="100%" height="100%" mask="url(#mask)">
    <animate attributeName="width"
             dur="2s"
             begin="0s"
             values="0%; 80%; 50%; 100%"
             fill="freeze"/>
  </rect>

</svg>

Хотя можно анимировать path d вот таким образом =>

<svg viewBox="0 0 200 100" width="200px">
<path d="M20,50 180,50 M160,30 180,50 160,70" fill="none" stroke="#000" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
  <animate attributeName="d" dur="3s" begin="0s" values="M20,50 80,50 M60,30 80,50 60,70;M20,50 180,50 M160,30 180,50 160,70" fill="freeze"/>
</path>
</svg>