Добавить стрелку к SVG анимации линии

#css #css3 #svg #css_animation #svg_animation

Я пытаюсь получить анимированную стрелку вокруг  логотипа SVG.
При использовании анимации обводки,  я не знаю, как присоединить стрелку к началу
 этой линии.    

Вот пример того, что я пытаюсь сделать:  https://stackoverflow.com/a/45548957/7394871     



.shape svg {
  width:100%;
  height: auto;
}
.outline {
  stroke-dasharray: 32050;
  animation: dash 2s linear forwards;
  stroke-linejoin: round;
}

@keyframes dash {
  from {
    stroke-dashoffset: 32050;
  }
  to {
    stroke-dashoffset: 0;
  }
}






    

Ответы

Ответ 1

Вы не можете анимировать маркер используя stroke-dasharray. Так как
  местоположение черты - пробела перемещается вдоль пути, но сам путь не
  перемещается, поэтому маркер, который находится на конце линии не будет
  перемещаться. @Michael Mullany      


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

Для этого используйте команду animateMotion 


       



, где 

id ="border" - анимируемый путь 

Анимации stroke-dashoffset и animateMotion имеют одинаковую продолжительность, и
поэтому будет казаться, что треугольник движется одновременно с линией.  



.shape svg {
  width:100%;
  height: auto;
}
.outline {
  stroke-dasharray: 3253;
  animation: dash 7s linear forwards;
  stroke-linejoin: round;
}

@keyframes dash {
  from {
    stroke-dashoffset: 3253;
  }
  to {
    stroke-dashoffset: 0;
  }
}