1013421 - transform-origin is not taken into account when CSS animating SVG elements

Status: RESOLVED DUPLICATE of bug 923193

(Core :: SVG, defect)

Description

[dotnetCarpenter]

Attachment: svg_css_animation.htm

User Agent: Mozilla/5.0 (Windows NT 6.1; rv:31.0) Gecko/20100101 Firefox/31.0 (Beta/Release)
Build ID: 20140520004002

Steps to reproduce:

1) Open Firefox and a webkit based browser
2) Go to: http://dabblet.com/gist/5375c186664df8524c0f in both


Actual results:

In the webkit browser you can change the transform-origin on line 25 and see that the CSS animation takes the origin into account when animating the polygons.
In Firefox, changing line 28, does nothing to the origin. The animation, always uses the top left as origin.


Expected results:

When transform-origin: center center, the animation should use the center of each polygon as origin.
Allowed values are: top, left, right, bottom and center.
Since the animation is only on the Y axes, only top, bottom and center makes sense in this context.

Comment 1

[dotnetCarpenter]

http://hansmuller-webkit.blogspot.dk/2012/03/css-transform-origin-coming-to-svg.html

Comment 2

[dotnetCarpenter]

Webkit implementation blog post: http://hansmuller-webkit.blogspot.dk/2012/03/css-transform-origin-coming-to-svg.html

Comment 3

[dotnetCarpenter]

Reproducible in Firefox 30.0 (beta) on Mac OSX 10.9.2

Comment 4

[:Gijs (he/him)]

Fairly sure this is a duplicate of bug 923193.