如何在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
    

我尝试过的

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

这是一个演示