Как анимировать svg?

Question

[AveConstantis]

Как можно анимировать данную svg, возможно есть какие-то плагины на js? Возможно можно как-то на css?

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

SVG иконка

Comments

[Сергей Соколов]

кончик стрелки должен быть всё время виден и «ползти»?
Или достаточно, чтобы пунктир появлялся постепенно, а в конце появилась и голова стрелки?

[AveConstantis]

Сергей Соколов, хоть как)

Answer 1

[Phoenix D3D9]

Думаю, ЭТО должно Вам помочь.
Всего доброго :)

Answer 2

[Brasileiro]

Скопируйте и запустите - отпишитесь

<svg width="374" height="146" viewBox="0 0 374 146" fill="none" xmlns="http://www.w3.org/2000/svg">
  
<defs>
<linearGradient id="paint0_linear" x1="3.92979" y1="71" x2="366.07" y2="71" gradientUnits="userSpaceOnUse">
<stop stop-color="#E58ED3"/>
<stop offset="0.17" stop-color="#DE8CD5"/>
<stop offset="0.41" stop-color="#CC86DC"/>
<stop offset="0.69" stop-color="#AE7CE6"/>
<stop offset="1" stop-color="#856EF5"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="365.998" y1="4" x2="374.002" y2="4" gradientUnits="userSpaceOnUse">
<stop stop-color="#E58ED3"/>
<stop offset="0.17" stop-color="#DE8CD5"/>
<stop offset="0.41" stop-color="#CC86DC"/>
<stop offset="0.69" stop-color="#AE7CE6"/>
<stop offset="1" stop-color="#856EF5"/>
</linearGradient>
<mask id="mask1">
  <rect width="100%" height="100%" fill="#000"/>
  <path d="M4 138V20C4 11.1634 11.1634 4 20 4H366" stroke="#fff" stroke-dasharray="4 4"/>
  <path d="M374 4L366 0V8L374 4Z" fill="#fff"/>
</mask>
<mask id="mask2">
  <rect width="100%" height="100%" fill="#000"/>
  <path d="M374 4L366 0V8L374 4Z" fill="#fff"/>
</mask>
</defs>
  

  
<rect width="0" height="100%" fill="url(#paint0_linear)" mask="url(#mask1)">
  <animate id="an1" attributeName="width"
                    dur="3s"
                    begin="0s"
                    values="0%; 40%; 30%; 50%;30%; 80%; 100%"
                    fill="freeze"/>
</rect>
<rect width="0%" height="100%" fill="url(#paint1_linear)" mask="url(#mask2)">
  <animate  attributeName="width"
                    dur="3s"
                    begin="an1.end"
                    values="0%;  100%"
                    fill="freeze"/>
</rect>

</svg>

Comments

[AveConstantis]

Здравствуйте, я пробовал данный подход. Да, он работает, но проблема в том, что нужно и под IE

[Brasileiro]

AveConstantis, ie и animate не совместимы