JavaScriptを使用してSVGポリラインにグラデーションを適用するにはどうすればよいですか？

Question

グラフを作成しようとしていますが、2つの線が2つの異なる進捗状況を示しています。だから、私はそれを達成するためにSVGポリライン&ライン関数を使用しています。サンプルコードはここにある：

var svgGraph = SVG("divID"); 
//Polyline 
var p = svgGraph.polyline(myXYDataArray); 
p.fill('#color').attr({ 
    'stroke': '#color', 
    'stroke-width': '5px' 
}); 
// Straight line 
var straighLine = svgGraph.line(0, 150, 300, 450); 
straighLine.fill('none').attr({ 
    'stroke': '#color', 
    'stroke-width': '5px' 
}); 

注：私はタグ - 使用しています ：グラフを配置するためのdivを、何かのように： <div id="divId"></div>

私が適用されます場合、私は、ラインの下並みの勾配を適用したいです'fill： "＃color"、ポリラインの上に適用されます。だから、誰かが私にこれを達成する方法を教えることができますか？ 説明のために画像を添付する：

Answer 1

2つの線の間の領域を定義する閉じた形を定義する必要があります。それにグラデーションを適用します。