Как сделать непрерывную петлю для пути анимации SVG d

Question

Можете ли вы посоветовать, как сделать непрерывную петлю для этой вперед и назад анимации огня?

Я использую начать = "0s; animation2.end", начинаются = "animation1.end" и RepeatCount = "неопределенный", но он не работает

<path fill="#D4563D" d="M419.252,447.04c2.804-2.361,5.321-5.14,7.105-8.359c8.168-14.729-2.858-30.388-15.194-38.418 
    c-7.087-4.613-15.402-7.63-23.878-8.085c-8.877-0.478-20.522,1.64-27.462,7.462c-11.44,9.596-17.307,24.36-21.51,38.384 
    c-2.066,6.898-5.156,50.213-4.626,50.168C368.798,485.174,393.431,468.778,419.252,447.04z"> 
    <animate id="animation1" 
      attributeName="d" 
      attributeType="XML" 
      from="M419.252,447.04c2.804-2.361,5.321-5.14,7.105-8.359c8.168-14.729-2.858-30.388-15.194-38.418 
       c-7.087-4.613-15.402-7.63-23.878-8.085c-8.877-0.478-20.522,1.64-27.462,7.462c-11.44,9.596-17.307,24.36-21.51,38.384 
       c-2.066,6.898-5.156,50.213-4.626,50.168C368.798,485.174,393.431,468.778,419.252,447.04z" 
      to="M419.252,447.04c2.804-2.361,5.321-5.14,7.105-8.359c8.168-14.729-2.858-30.388-15.194-38.418 
       c-7.087-4.613-15.402-7.63-23.878-8.085c-8.877-0.478-20.522,1.64-27.462,7.462c-11.44,9.596-17.052,24.439-21.51,38.384 
       c-8.141,25.465,10.927,50.364,11.422,50.168C391.047,471.82,393.431,468.778,419.252,447.04z" 
      dur="1s" 
      /> 
    <animate id="animation2" 
      attributeName="d" 
      attributeType="XML" 
      from="M419.252,447.04c2.804-2.361,5.321-5.14,7.105-8.359c8.168-14.729-2.858-30.388-15.194-38.418 
       c-7.087-4.613-15.402-7.63-23.878-8.085c-8.877-0.478-20.522,1.64-27.462,7.462c-11.44,9.596-17.052,24.439-21.51,38.384 
       c-8.141,25.465,10.927,50.364,11.422,50.168C391.047,471.82,393.431,468.778,419.252,447.04z" 
      to="M419.252,447.04c2.804-2.361,5.321-5.14,7.105-8.359c8.168-14.729-2.858-30.388-15.194-38.418 
       c-7.087-4.613-15.402-7.63-23.878-8.085c-8.877-0.478-20.522,1.64-27.462,7.462c-11.44,9.596-17.307,24.36-21.51,38.384 
       c-2.066,6.898-5.156,50.213-4.626,50.168C368.798,485.174,393.431,468.778,419.252,447.04z" 
      dur="1s" 
      begin="1s" /> 
</path> 

Answer 1

Вы можете укажите несколько ключевых значений анимации в атрибуте values элемента animate. Они разделены точкой с запятой (как spec states). Трюк здесь заключается в объявлении анимации, которая переходит из первого состояния в промежуточное состояние и обратно в первое состояние, используя три ключевых значения, причем первое и последнее являются одинаковыми. С атрибутом repeatCount, установленным в indefinite, анимация непрерывно интерполируется между двумя состояниями. Конечно, атрибут dur должен быть удвоен.

<path fill="#D4563D" d="M419.252,447.04c2.804-2.361,5.321-5.14,7.105-8.359c8.168-14.729-2.858-30.388-15.194-38.418 
    c-7.087-4.613-15.402-7.63-23.878-8.085c-8.877-0.478-20.522,1.64-27.462,7.462c-11.44,9.596-17.307,24.36-21.51,38.384 
    c-2.066,6.898-5.156,50.213-4.626,50.168C368.798,485.174,393.431,468.778,419.252,447.04z"> 
    <animate 
     attributeName="d" 
     begin="0s" 
     dur="2s" 
     repeatCount="indefinite" 
     values=" 
      M419.252,447.04c2.804-2.361,5.321-5.14,7.105-8.359c8.168-14.729-2.858-30.388-15.194-38.418 c-7.087-4.613-15.402-7.63-23.878-8.085c-8.877-0.478-20.522,1.64-27.462,7.462c-11.44,9.596-17.307,24.36-21.51,38.384 c-2.066,6.898-5.156,50.213-4.626,50.168C368.798,485.174,393.431,468.778,419.252,447.04z; 
      M419.252,447.04c2.804-2.361,5.321-5.14,7.105-8.359c8.168-14.729-2.858-30.388-15.194-38.418 c-7.087-4.613-15.402-7.63-23.878-8.085c-8.877-0.478-20.522,1.64-27.462,7.462c-11.44,9.596-17.052,24.439-21.51,38.384 c-8.141,25.465,10.927,50.364,11.422,50.168C391.047,471.82,393.431,468.778,419.252,447.04z; 
      M419.252,447.04c2.804-2.361,5.321-5.14,7.105-8.359c8.168-14.729-2.858-30.388-15.194-38.418 c-7.087-4.613-15.402-7.63-23.878-8.085c-8.877-0.478-20.522,1.64-27.462,7.462c-11.44,9.596-17.307,24.36-21.51,38.384 c-2.066,6.898-5.156,50.213-4.626,50.168C368.798,485.174,393.431,468.778,419.252,447.04z" 
     /> 
</path> 

Answer 2

Вы должны использовать repeatCount="1" и begin="0s;animation2.end" на первой анимации и begin="animation1.end" на второй анимации. Протестировано и работает (в Chrome).