javascript - 如何使用 JavaScript 在 SVG 折线上应用渐变？

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

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

我想在线条的下部应用渐变，如果我应用 'fill:"#color"，它将应用到多段线的顶部。那么，有人可以帮助我如何实现这一目标。 附上图片以供澄清:

Answer 1

您必须定义一个闭合形状来定义两条线之间的区域。然后对其应用渐变。