如何在SVG中为多边形添加渐变填充？

Question

如何在SVG中为多边形添加渐变填充？

8

我正在使用这个很棒的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)。然而，这导致填充变成了纯黑色。

这里是演示

- Fizzix

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paul LeBeau · Accepted Answer

使用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渐变的更多信息：

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