如何使用JavaScript將漸變應用於SVG Polyline？

Question

我正在嘗試創建一個圖形，用兩行顯示兩個不同的進度。所以，我正在使用div SVG Polyline & Line函數來實現它。示例代碼是在這裏：

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

您將不得不定義一個封閉形狀來定義兩條線之間的區域。然後對其應用漸變。