svg css animation?

M

Mikhail Lebedev2021-04-26 18:58:13

css

Mikhail Lebedev, 2021-04-26 18:58:13

svg css animation?

How to animate ellipse if only ry="" needs to be changed?
snippet
We need an effect like blinking an eye and this is needed in a separate .svg file

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

4

4ce, 2021-04-27
@zaza41rus

⠀ Is this?snippet
⠀ What has changed?

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

replaced with:

<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>

⠀Where: keyTimes="0;.5;1"( 0 to 1 ) change time attributeName="ry"( ry ) values="20;0;20"( ry values ) multiplied by dur="2s"( animation time 2 seconds ) repeated repeatCount="indefinite"( number of repetitions now: infinite )
⠀But this is not the only solution.
⠀As a cheat sheet when writing the answer, I used the article A Guide to SVG Animations (SMIL) (found in google)