¿Cómo dar a un polígono un relleno degradado dentro de un svg?

Estoy usando este increíble complemento de jQuery – http://benpickles.github.io/peity/

Básicamente, rinde mini gráficos y tablas en formato svg . Dentro de este elemento svg , hay un polygon y una polyline . Necesito poder darle al polígono un degradado como relleno, en lugar de un color sólido.

Aquí está el HTML en bruto antes de que el plugin lo convierta:

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

Aquí está el gráfico después de la conversión:

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

Lo que he intentado:

fill: linear-gradient(#FF0000, #00FF71) darle al fill un degradado a través de CSS, como fill: linear-gradient(#FF0000, #00FF71) . Aunque, esto causó que el relleno fuera un negro sólido.

AQUI ESTA UNA DEMO

Utilice un gradiente de SVG.

Agregue la definición de gradiente como un fragmento separado de SVG en su archivo HTML:

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

Entonces consúltalo en tu CSS:

 polygon { fill: url(#grad); } 

Demo aquí

Puedes aprender más sobre los gradientes SVG aquí:

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