SVG properties do not animate when target value is a CSS Custom Property

[tinleym]

1. Describe the bug
SVG properties do not animate when target is a CSS Custom Property; animation seems to work fine when the value is hardcoded.

2. IMPORTANT: Provide a CodeSandbox reproduction of the bug
In the example below, hardcoded values work on SVGs where variables do not...
https://codesandbox.io/s/keen-resonance-5rovv?file=/src/App.js

3. Steps to reproduce
Steps to reproduce the behavior:

1. Hover the text -- the animation sets color to a CSS Custom Property: ok
2. Hover the smile -- the animation sets the wrapper color to a CSS Custom Property (the target's stroke is currentColor): ok
3. Hover the paperclip -- the animation sets stroke to a CSS Custom Property: does not work
4. Hover the shield -- the animation sets stroke to a hardcoded value: ok
5. Hover the eye -- the animation sets stroke-width the a CSS Custom Property: does not work
6. Hover the wrench -- the animation sets stroke-width to a hardcoded value: ok

4. Expected behavior
The SVG properties should animate to CSS Custom Properties like they do for a hardcoded values.

5. Environment details
framer-motion 5.2.0 / Chrome 95.0.4638.69 / MacOs 11.4