SVG gradient using CSS

Question

I\'m trying to get a gradient applied to an SVG rect element.

Currently, I\'m using the fill attribute. In my CSS file:

rec         


        

Answer 1

Just use in the CSS whatever you would use in a fill attribute. Of course, this requires that you have defined the linear gradient somewhere in your SVG.

Here is a complete example:

rect {
    cursor: pointer;
    shape-rendering: crispEdges;
    fill: url(#MyGradient);
}