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

Example URL:
https://codepen.io/anon/pen/XZroeV

Steps to reproduce the problem:
Go to https://codepen.io/anon/pen/XZroeV or run the attached code. 

It displays an SVG sprite, which uses the currentColor value and a CSS variable for the fill property.

If you click on the "Swap Colors" button, the blue and red color should swap. In the upper part the swapping should occur smoothly (css transition is applied), in the lower part it should happen instantly (no transition).

What is the expected behavior?

What went wrong?
The swapping without transition works as expected, but with transition it does not work properly. When using "currentColor", the transition setting seem to be ignored and the color change occurs instantly. When using the CSS variable, the color change does no work at all and the rectange turns black instead. Interestingly when looking at the elements with Chrome developer tools, the correct fill value seems to be set, but it does not show. 

Does it occur on multiple sites: N/A

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 64.0.3282.119  Channel: stable
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)
Flash Version: 

Works without issues on Firefox an Edge
 

Deleted: sprite-css-transition.html 1.5 KB

sprite-css-transition.html 1.5 KB View Download