如何使用JavaScript在SVG Polyline上应用Gradient？

Question

我正在尝试创建一个图表，其中两行显示两个不同的进展。所以，我正在使用div SVG Polyline＆amp;线功能实现它。示例代码在这里：

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'
});

注意： 我正在使用tag-：div来放置图形，例如：  <div id="divId"></div>

我想在行的较低标准处应用渐变，如果我应用'fill：“＃color”，它将应用于折线的顶部。所以，有人可以帮助我如何实现这一目标。 附上图片以便澄清：

Answer 1

您必须定义一个闭合的形状，以定义两条线之间的区域。然后将渐变应用于此。