Как синхронизировать анимацию SVG SMIL? - PullRequest
Новая
       46

Как синхронизировать анимацию SVG SMIL?

0 голосов
/ 15 октября 2019

Я пытаюсь синхронизировать две анимации, используя 'syncbase' значение 

...

<path
  d="M0 0 H100 V50 H0 Z"
  fill="purple"
>
  <animate
    id="anim1"
    attributeName="d"
    to="M0 0 H20 V50 H0 Z"
    begin="indefinite"
    end="indefinite"
    dur="2s"
    fill="freeze"
  />
</path>
<path
  d="M0 50 H100 V100 H0 Z"
  fill="pink"
>
  <animate
    id="anim2"
    attributeName="d"
    to="M0 50 H20 V100 H0 Z"
    begin="anim1.begin"
    end="anim1.end"
    dur="2s"
    fill="freeze"
  />
</path>

...

После многократного перезапуска до завершения анимации вторая анимация в итоге перестает синхронизироваться:

out of sync visualisation

Оформить это демо

Можно перезапустить все анимации вручную, покапроблема возникает, когда увеличивается сложность элемента svg и появляется много анимаций. Если бы было возможно связать анимации SMIL, как в этом (не работающем) примере, это очень сильно упростило бы.

Как перезапустить несколько анимаций с помощью одного вызова beginElement и / или endElement?

РЕДАКТИРОВАТЬ: Несинхронизация происходит только в Chrome.

...