A simple scale in a SVG won't scale from bottom - only from top

[Devotee007]

Hey! 

 

I try to do a scale in  a SVG from bottom to top on hover. But How ever I try, it only works when I set origin from top?

 

//devotee007

See the Pen MWddNrP by Devotee007 (@Devotee007) on CodePen

[Sahil]

Main issue comes from setting scale in CSS, not sure if it is a bug or technical limitation. Also, if you set transform origin in CSS then rect will scale from bottom of SVG. It is not visible in your example but if svg has more height than rect then it will be visible. GSAP correctly sets transform origin and element will scale from expected position. So for now I would recommend setting scale using gsap and maybe transform origin as well.

See the Pen rNgEdmm by SahilAFX (@SahilAFX) on CodePen

[Devotee007]

Sahil, thank you! That solved the problem.