我正在使用这个很棒的 jQuery 插件 - http://benpickles.github.io/peity/

基本上,它以 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> 

我尝试过的:

我试图通过 CSS 为 fill 提供渐变,例如 fill: linear-gradient(#FF0000, #00FF71)。虽然,这导致填充为纯黑色。

HERE IS A DEMO

请您参考如下方法:

使用 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


评论关闭
IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!