Для получения необходимых размеров эллипса и расположения центра эллипса, измените координаты цветных точек управления,- для этого наведите курсор на одну из точек и удержива¤ левую клавишу мышки переместите соответствующую точку.
Скопируйте код SVG.
Автор: Peter Collingridge
Update В формуле из генератора эллипсов необходимо заменить circle на ellipse
|
1 |
<ellipse cx="200" cy="80" rx="36" ry="50" /> |
Примеры анимации эллипсов
Начальная фигура, которую будем анимировать
Изменение атрибута эллипсаrx
|
1 2 3 4 5 6 |
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="0 0 200 200" > <ellipse cx="100" cy="80" rx="36" ry="50" stroke="gray" fill="purple" > <animate attributeName="rx" dur="4s" values="36;1;1;36;36" fill="freeze" repeatCount="3" /> </ellipse> </svg> |
Изменение атрибута эллипсаry
|
1 2 3 4 5 6 7 |
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="0 0 200 200" > <ellipse cx="100" cy="80" rx="36" ry="50" stroke="gray" fill="purple" > <animate attributeName="ry" dur="4s" begin="click" values="50;0;0;50;50" fill="freeze" repeatCount="3" /> </ellipse> <text x="75" y="85" font-size="24" fill="white" pointer-events="none" >Click </text> </svg> |