我正在使用这个很棒的 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)。虽然，这导致填充为纯黑色。
请您参考如下方法:
使用 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);
}
您可以在此处了解有关 SVG 渐变的更多信息:
