Stil oluşturma için CSS 3 geçişleri SVG öğeleri

Question

Stil doldurma özelliği için CSS3 gradyanlarını kullanmak mümkün mü?

SVG'nin kendi geçişlerini sağladığını biliyorum. Ama benim için ideal bir çözüm olacaktır:

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

ben SVG farkları kullanmamızı çalıştığımda, sıkışmışlık var ben harici stil sayfasına stil özelliği ayıklamak için çalıştı. Bu doldurma görünüyordu: URL (#linearGradientXYZ) gradyan .svg dosyasında tanımlandığı gibi işe yaramadı.

Answer 1

Hayır, dolgu özelliği için CSS3 gradyanlarını kullanmak henüz mümkün değil. İyi haber ise CSS ve SVG çalışma grupları tarafından tartışılmakta olup, SVG.next CSS3 Görüntü Değerlerine (CSS gradyan sözdizimini tanımlayan) bağlı olacaktır. Bakınız http://www.w3.org/2011/07/29-svg-minutes.html#item08.

Varsayılan olarak, fill:url(...) için temel URL'nin bu kuralı içeren dosya olduğunu unutmayın. Yani, fill:url(#linearGradientXYZ)'u bir harici stil sayfasına taşımak istiyorsanız, bu degrade tanımını içeren dosyaya tam yolu eklemeyi unutmayın, örn. fill:url(../images/gradients.svg#linearGradientXYZ).