Как создать плавный двусторонний переход в SVG со SMIL? - PullRequest
Новая
       43

Как создать плавный двусторонний переход в SVG со SMIL?

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

Я пытаюсь анимировать переход между двумя состояниями, используя SVG и SMIL: 

...

  <svg xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 100 100"
    height="100"
    width="100"
  >
    <path
      d="M0 0 H100 V100 Z"
      fill="orange"
      stroke="blue"
      stroke-width="1"
    >
      <animate
        id="animShrink"
        attributeName="d"
        to="M0 0 H50 V50 Z"
        begin="indefinite"
        end="indefinite"
        dur="2s"
        fill="freeze"
      />
      <animate
        id="animExtend"
        attributeName="d"
        to="M0 0 H100 V100 Z"
        begin="indefinite"
        end="indefinite"
        dur="2s"
        fill="freeze"
      />
    </path>
  </svg>

...

Код, запускающий анимацию: 

document.getElementById("toShrinked").onclick = function(){
  document.getElementById("animExtend").endElement();
  document.getElementById("animShrink").beginElement();
}
document.getElementById("toExtended").onclick = function(){
  document.getElementById("animShrink").endElement();
  document.getElementById("animExtend").beginElement();
}

JS Fiddle

Можно ли начать новую анимацию там, где предыдущая закончилась, если предыдущая не была завершена для обоих переходов? В настоящее время это происходит только в одном направлении.

Timeline illustrating the problem

Я не ищу ключевые кадры или решение для свойства перехода, потому что свойство d анимации donне работает в Firefox.

Другой вопрос, возможно ли сократить продолжительность следующего перехода в случае, если предыдущий не был завершен (переходы могут быть только между двумя состояниями) без JavaScript?

...