CSS 3漸變樣式SVG元素

是否可以使用CSS3漸變樣式填充屬性？CSS 3漸變樣式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%); 
    ... 
}

當我試圖使用SVG漸變，我stucked當我試圖提取風格屬性，外部的樣式表。似乎fill：url（#linearGradientXYZ）不起作用，因爲漸變是在.svg文件中定義的。

來源

2011-08-05 Milos Kalab

不，它尚不可能使用CSS3漸變填充屬性。好消息是，它正在由CSS和SVG工作組討論，並且SVG.next將取決於CSS3圖像值（它定義了CSS漸變語法）。見http://www.w3.org/2011/07/29-svg-minutes.html#item08。

請注意，fill:url(...)的默認基址是包含此規則的文件。因此，如果你想將fill:url(#linearGradientXYZ)移動到外部樣式表中，請記住將包含該漸變定義的文件的完整路徑添加到該文件中，例如。 fill:url(../images/gradients.svg#linearGradientXYZ)。

來源

2011-08-19 07:12:43

CSS 3漸變樣式SVG元素

回答

相關問題