スタイリング用CSS 3グラデーションSVG要素

Question

スタイリングの塗りつぶしプロパティにCSS3グラデーションを使用できますか？

私は、SVGが独自のグラデーションを提供していることを知っています。しかし、私のための理想的なソリューションは次のようになります。私はSVGのグラデーションを使用しようとしたとき、私は、外部スタイルシートにスタイル属性を抽出しようとしたとき

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

、私はstuckedです。 .svgファイルでグラデーションが定義されているため、fill：url（#linearGradientXYZ）は機能しませんでした。

Answer 1

いいえ、fillプロパティにCSS3グラデーションを使用することはまだできません。 CSSとSVGのワークグループで議論されていることは良いことですが、SVG.nextはCSS3の画像値（CSSのグラデーション構文を定義しています）に依存します。 http://www.w3.org/2011/07/29-svg-minutes.html#item08を参照してください。

デフォルトでfill:url(...)のベースURLがこのルールを含むファイルであることに注意してください。したがって、fill:url(#linearGradientXYZ)を外部スタイルシートに移動する場合は、その勾配定義を含むファイルに完全なパスを追加することを忘れないでください。 fill:url(../images/gradients.svg#linearGradientXYZ)。