1673912 - CSS transition property has no effect on the SVG transform attribute

Status: RESOLVED DUPLICATE of bug 878346

(Firefox :: Untriaged, defect)

Description

[tadeusz]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:81.0) Gecko/20100101 Firefox/81.0

Steps to reproduce:

Make a website with SVG content. Give one of the SVG elements transform attribute like this:

<rect 
        width="10" 
        height="10" 
        transform="translate(0, 0)"
>

Apply a stylesheet with a transition property, e.g.:

rect {
  transition: transform, 500ms;
}

Use a script to change the transform on the SVG element.

See the reduced example here: https://codepen.io/tad-lispy/pen/jOrYgOm

Actual results:

The transformation changes abruptly.

Expected results:

The transformation would transition over specified duration.