I've been trying to animate a simple path (i.e. circle) with

<animate attributeName="height" values="100;0" dur="1s" begin="0s"/>

...this works if I slap it onto a shape (e.g. rect), but fails on a path.

Without using another custom path, is there any way to simply adjust the dimensions of a path using SMIL only?

EDIT: I'm looking for absolute values, not tweaking percentages like skew in animateTransform does.


1 Answer 1


In general, you should avoid animating SVG with SMIL for the web at least.

But to answer your question, what does changing the height by 100 mean on a path? Which points do you change? It's impossible to know without knowing both the path and the desires of whoever is animating it.

That's why the only way to animate the values of the path is to include an entirely new d in the animate. You can read about doing so in this blog post.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.