Percentage transform-origin for SVG not obeyed in Firefox, only sometimes in WebKit

Question

I have this ice cream cone SVG graphic, and I want to transform the scoop with a transform-origin of 50% 100% (center bottom). Firefox claims to obey (i.e. the inspector notes the correct transform-origin) but in fact transforms about the upper left corner. WebKit, bizarrely, will only obey if a parent element has font-size:100% set.

These are very similar questions but only pertain to Firefox:

1. Setting transform-origin on SVG group not working in FireFox

2. How to set transform origin in SVG

3. Transform Origin not working in Firefox

Answer 1

Just recently I came across the same problem; here's how I went about solving it:

According to this page on SVG animation with CSS transforms, major browsers simply aren't consistent in applying transform-origin to SVG elements yet. The author of the page created a JavaScript animation platform called GSAP, and explains some of its transform-origin calculations in the article. While you're more than welcome to implement the math yourself with JavaScript to fix SVG origins, I took a look at GSAP (specifically the TweenLite tool) and it ended up suiting my needs perfectly. If you're OK using an external library in your website, I would recommend using his tool to perform animation on SVG elements, since it allows you to animate elements consistently across all major browsers. It's obviously not preferable to transform-origin simply working like it's supposed to, but until browsers update, this has been a suitable alternative for me.