Как продолжить до конца продолжительности для неопределенной анимации при наведении мыши - PullRequest
Новая
       43

Как продолжить до конца продолжительности для неопределенной анимации при наведении мыши

0 голосов
/ 14 января 2020

Я хочу создать SVG с атрибутами анимации, которые могут продолжать анимацию при наведении мыши.

При отключении мыши, я хочу, чтобы анимация продолжалась до конца.

Я не могу этого добиться, так как моя анимация всегда заканчивается внезапно. 

<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Simple color fill -->
  <circle cx="50" cy="50" r="40" fill="teal" >
<animate attributeName="fill" values="teal;cyan;teal;" dur="1s" calcMode="paced" repeatCount="indefinite" begin="mouseover" end="mouseout" />
  </circle>
</svg>

Поймите, что мы можем добиться слегка плавного ощущения, добавив атрибут fill="freeze".

Однако это возвращает вопрос о том, что цвет не является так же, как и с того места, где он остановился.

Есть идеи, как мы можем создать плавную анимацию при наведении мыши, просто используя атрибуты svg?

Я надеюсь не использовать Javascript.

...