如何在svg中为多边形提供渐变填充？

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

基本上，它以svg格式呈现迷你图形和图表。在这个svg元素中，有一个polygon和一个polyline 。我需要能够给多边形一个渐变作为填充，而不是纯色。

这是插件转换之前的原始HTML：

  100, 100.67, 102.34, 109.30, 101.20, 99.20, 70.20

这是转换后的图表：

  100, 100.67, 102.34, 109.30, 101.20, 99.20, 70.20

我试过的：

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

这是一个演示

使用SVG渐变。

在HTML文件中将渐变定义添加为单独的SVG片段：

 100, 100.67, 102.34, 109.30, 101.20, 99.20, 70.20

然后在CSS中引用它：

 polygon { fill: url(#grad); }

在这里演示

您可以在此处了解有关SVG渐变的更多信息：