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

Steps to reproduce the problem:
When CSS animation is not used the fill colors on rectangles inside "use" elements are inherited from the "use" elements (as expected). When CSS animation is used all the rectangles get the fill color of the last "use". However, when the referenced rectangle comes after the referencing "use" elements in the document, the fills are correct again.
The same goes when using CSS variables instead of inheritance and when enclosing the reference element in a "symbol" or "g".

What is the expected behavior?
The rectangles should inherit fill colors from their corresponding "use" elements.

What went wrong?
When CSS Animation is used, all the rectangles get fill colors of the last "use" element, when it comes later in the document order.

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 63.0.3239.132  Channel: stable
OS Version: 10.0
Flash Version:
 

Deleted: chrome-svg-animations.html 1.7 KB

chrome-svg-animations.html 1.7 KB View Download