如何給一個多邊形漸變填充svg內？

我用這真棒jQuery插件 - http://benpickles.github.io/peity/如何給一個多邊形漸變填充svg內？

基本上，它呈現小圖形和圖表中svg格式。在此svg元素內，有一個polygon和一個polyline。我需要能夠給多邊形填充漸變，而不是純色。

這裏是原始HTML插件轉換前：

<td class="chartSection"> 
    <span class="chart">100, 100.67, 102.34, 109.30, 101.20, 99.20, 70.20</span> 
</td>

這裏是轉換後的圖表：

<td class="chartSection"> 
    <span class="chart" style="display: none;">100, 100.67, 102.34, 109.30, 101.20, 99.20, 70.20</span> 
    <svg class="peity" height="53" width="200"> 
     <polygon fill="#c6d9fd" points="0 52 0 4.924519670631284 33.333333333333336 4.6057639524245175 66.66666666666667 3.8112534309240544 100 0.5 133.33333333333334 4.353613906678859 166.66666666666669 5.305123513266238 200 19.102012808783165 200 52"></polygon> 
     <polyline fill="transparent" points="0 4.924519670631284 33.333333333333336 4.6057639524245175 66.66666666666667 3.8112534309240544 100 0.5 133.33333333333334 4.353613906678859 166.66666666666669 5.305123513266238 200 19.102012808783165" stroke="#4d89f9" stroke-width="1" stroke-linecap="square"></polyline> 
    </svg> 
</td>

我曾嘗試：

我試圖給fill通過CSS的梯度，如fill: linear-gradient(#FF0000, #00FF71)。雖然，這導致填充是一個堅實的黑色。

HERE IS A DEMO

來源

2014-05-05 Fizzix

使用SVG漸變。

添加漸變定義爲SVG的一個單獨的片段在HTML文件中：

<span class="chart">100, 100.67, 102.34, 109.30, 101.20, 99.20, 70.20</span> 

<svg> 
    <defs> 
     <linearGradient id="grad"> 
      <stop offset="0" stop-color="red"/> 
      <stop offset="1" stop-color="blue"/> 
     </linearGradient> 
    </defs> 
</svg>

然後參考它在你的CSS：

polygon { 
    fill: url(#grad); 
}

Demo here

您可以瞭解更多關於SVG漸變在這裏：

http://www.w3.org/TR/SVG11/pservers.html

來源

2014-05-05 03:00:35

很好，謝謝！我如何編輯這個讓梯度變爲垂直而不是水平？ – Fizzix

閱讀我發佈的鏈接。它解釋瞭如何做到這一點，以及徑向漸變等。在此期間，這裏是一個例子：http://jsfiddle.net/T53hE/2/ –

非常感謝您的幫助:) – Fizzix

如何給一個多邊形漸變填充svg內？

回答

相關問題