Javascript 如何在svg中为多边形提供渐变填充?
我正在使用这个很棒的jQuery插件- 基本上,它以Javascript 如何在svg中为多边形提供渐变填充?,javascript,jquery,css,svg,linear-gradients,Javascript,Jquery,Css,Svg,Linear Gradients,我正在使用这个很棒的jQuery插件- 基本上,它以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>
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>
100, 100.67, 102.34, 109.30, 101.20, 99.20, 70.20
以下是转换后的图表:
<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>
100, 100.67, 102.34, 109.30, 101.20, 99.20, 70.20
我尝试过的:
<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>
您可以在此处了解有关SVG渐变的更多信息:
效果很好,谢谢!我如何编辑这个使梯度垂直而不是水平?阅读我发布的链接。它解释了如何做到这一点,以及径向梯度等。同时,下面是一个示例: