按鈕點擊HTML頁面後的漸變填充SVG

Question

點擊頁面上的按鈕後，是否可以通過漸變顏色填充SVG？我在這裏閱讀了很多文章，但沒有人幫助我。我只需要css中的漸變顏色（最佳選項）。

這裏就是我需要申請「金屬製品的顏色」的一個例子 - http://web-stranky.org/pro_dementa/

我會感謝任何幫助。

Answer 1

雖然您可以通過在svg中定義漸變並使用fill屬性獲取漸變填充svg來填充svg中的漸變，但svg尚不支持CSS3漸變屬性。

<svg height="150" width="400"> 
    <defs> 
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> 
     <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> 
     <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> 
    </linearGradient> 
    </defs> 
    <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" /> 
</svg> 

更多細節 http://www.w3schools.com/svg/svg_grad_linear.asp