CSS 3 degradados para diseñar elementos SVG

Question

¿Es posible usar degradados CSS3 para diseñar la propiedad de relleno?

Sé que SVG proporciona sus propios degradados. Pero la solución ideal para mí sería:

.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%); 
    ... 
} 

Cuando intenté usar gradientes SVG, llegué stucked cuando traté de extraer atributo de estilo de estilo externa. Parecía que fill: url (#linearGradientXYZ) no funcionaba ya que el gradiente se definía en el archivo .svg.

Answer 1

No, aún no es posible usar degradados de CSS3 para la propiedad de relleno. Sin embargo, la buena noticia es que los grupos de trabajo de CSS y SVG lo están discutiendo, y SVG.next dependerá de los valores de imagen de CSS3 (que define la sintaxis del degradado de CSS). Ver http://www.w3.org/2011/07/29-svg-minutes.html#item08.

Tenga en cuenta que la url base para el fill:url(...) de forma predeterminada es el archivo que contiene esta regla. Por lo tanto, si desea mover fill:url(#linearGradientXYZ) a una hoja de estilo externa, recuerde agregar la ruta completa al archivo que contiene esa definición de gradiente, por ej. fill:url(../images/gradients.svg#linearGradientXYZ).