Reputation: 21
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
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>
Upvotes: 1