如何使用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

您将不得不定义一个封闭形状来定义两条线之间的区域。然后对其应用渐变。