Inci
Inci

Reputation: 21

Transforming an ellipse in svg

Im currently programming in svg for an assignment and i can't seem to get this right. So I want an ellipse so make get smaller and bigger, not in the cx or cy, but in the ry. My question is how i could do this. Because when I try to use the transform tool, it doesnt work. As you can see in the snippet below, I added a third value. When I did this it stopped working, but i dont know how I could make it work. this is an illustration to show what i want to achieve

EDIT: i found a way to make it work! (I have posted the answer)

<ellipse id="experi2" cx="610" cy="330" rx="600" ry="250" style= "fill: #404040; stroke:black; stroke-width:10" filter="url(#blurryedge)" />


<animateTransform
 xlink:href="#experi2"
attributeName="transform"
type="translate"
from="610 330 250" <!-- when i added the third value it stopped working --> 
to=" 610 330 20"
begin="0s"
dur="2s"
Repeatcount="freeze"
/> 

Upvotes: 1

Views: 237

Answers (1)

Inci
Inci

Reputation: 21

You need to change the attributename to 'ry'


How to make it work:

<svg height="140" width="500">

<ellipse  cx="200" cy="80" rx="100" ry="50" style= "fill: pink; stroke:black; stroke-width:5"  >
<animate attributeName="ry" begin="0s" dur="4s" repeatCount="freeze" from="35%" to="0.1%"/>
</ellipse>
<!-- you just change the attributeName -->

</svg>
(If you happen to have any questions about this about this, feel free to ask them)

Upvotes: 1

Related Questions