CSS 3 gradients for styling SVG elements

Question

Is it possible to use CSS3 gradients for styling fill property?

I know that SVG provides their own gradients. But the ideal solution for me would be:

.button{
    fill:#960000;
    fill: -webkit-gradient,linear,left bottom,left top,
          color-stop(0.45, #37304C),color-stop(0.73, #534D6B));
    fill: -moz-linear-gradient(center bottom,#37304C 45%,#534D6B 73%);
    ...
}

When I tried to use SVG gradients, I got stucked when I tried to extract style attribute to external stylesheet. It seemed that fill:url(#linearGradientXYZ) didn't work as the gradient was defined in .svg file.

Answer 1

No it's not yet possible to use CSS3 gradients for the fill property. The good news though is that it's being discussed by the CSS and SVG workgroups, and SVG.next will depend on CSS3 Image Values (which defines the CSS gradient syntax). See http://www.w3.org/2011/07/29-svg-minutes.html#item08.

Note that the base url for the fill:url(...) by default is the file that contains this rule. So if you want to move fill:url(#linearGradientXYZ) to an external stylesheet remember to add the full path to the file containing that gradient definition, eg. fill:url(../images/gradients.svg#linearGradientXYZ).