1435443 - css transition does not work on svg transform attribute

Status: RESOLVED DUPLICATE of bug 878346

(Core :: SVG, defect, P3)

Description

[artin.phares]

User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36

Steps to reproduce:

- create SVG element
- add CSS transition for target element: 'transition: transform 2s'
- change 'transform' attribute of target element from javascript 



Actual results:

CSS transition ignored. Transformation is applied, but not animated.


Expected results:

Changes of transformation should be animated.

But, if transform is defined in CSS instead of attribute (both transformation and transition are in CSS) then it works.
Cannot use this workaround, because CSS transform on SVG elements is not supported in Edge.

Playground:
http://jsbin.com/sekasid/edit?html,output

Comment 1

[Emilio Cobos Álvarez (:emilio)]

Without knowing much about SVG I suspect this is working as intended, the transform attribute doesn't map to the CSS property, so getComputedStyle(rect).transform in your example is always 'none'.

Maybe Jonathan can take a look and confirm that?

Comment 2

[Robert Longson [:longsonr]]

The transform attribute didn't mapt to the CSS property in SVG 1.1, it should in SVG 2. We just haven't implemented that yet (bug 878346)

Comment 3

[Jet Villegas (inactive)]

[ Triage 2017/02/20: P3 ]

Comment 4

[Daniel Holbert [:dholbert]]

I think this is effectively a duplicate of bug 878346, then.  Once the transform attribute causes the "transform" property value to be set, then transitions should Just Work.