Svg - Possible to Use Css's Linear-Gradient as Fill? [Closed]

TLDR;

Is it at all possible to use CSS's linear-gradient() function to fill SVG elements? Any ideas of workarounds are welcomed too.

Basically I'm trying to make a templating system for simple graphs using Mustache. The user (another developer) should be able to change the style of the graphs using CSS.

However I quickly found out that SVG's fill attribute is not happy with CSS's linear-gradient() function. fill: linear-gradient(#000, #FFF); simply makes both Chrome and Firefox complain with Invalid property value. This means that the user will have to change the SVG DOM and add a <linearGradient> element, then refer to it in fill, if said user wants any gradient effect.

This is indeed achievable within my current templating framework, but I would prefer not to change the DOM if at all possible.

Any ideas?