Svg css анимация?

Question

[Za Za]

Как анимировать ellipse если у него нужно изменить только ry="" ?

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

Comments

[Максим]

там path нужен а не ellipse

[Za Za]

а как у paht менять height?

Answer 1

[4ce]

⠀Такое?
⠀Что поменялось?

<ellipse class="st1" cx="297.6" cy="420.9" rx="123.7" ry="20"/>

заменено на:

<ellipse class="st1" cx="297.6" cy="420.9" rx="123.7" ry="20">
<animate attributeName="ry" dur="2s" repeatCount="indefinite" keyTimes="0;.5;1" values="20;0;20"/>
 </ellipse>

⠀Где: keyTimes="0;.5;1"(от 0 до 1) время изменения attributeName="ry"(ry) values="20;0;20"(значения ry) умноженное на dur="2s"(время анимации 2секунды) повторявшееся repeatCount="indefinite"(количество повторений сейчас:бесконечно)
⠀Но это не единственный вариант решения.
⠀В качестве шпаргалки при написании ответа пользовался статьёй A Guide to SVG Animations (SMIL) (найдено в google)

Comments

[Za Za]

то что доктор прописал! спс!