如何用随坡度变化的颜色填充折线图？

// 假设已经有了一个包含折线图数据的数组 data，每个数据点包括 x 和 y 坐标
// 假设已经有了一个渐变色方案 gradient，包括起始颜色和结束颜色

// 对数据按照 x 坐标进行排序
data.sort((a, b) => a.x - b.x);

// 创建一个 SVG 元素
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "500");
svg.setAttribute("height", "300");

// 创建一个路径元素
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");

// 构建填充区域的路径
let pathData = `M ${data[0].x} ${data[0].y}`;
for (let i = 1; i < data.length; i++) {
  pathData += ` L ${data[i].x} ${data[i].y}`;
}
pathData += ` L ${data[data.length - 1].x} 300 L ${data[0].x} 300 Z`;

// 应用颜色渐变方案
path.setAttribute("d", pathData);
path.style.fill = `url(#${gradient})`;

// 将路径元素添加到 SVG 元素中
svg.appendChild(path);

// 将 SVG 元素添加到页面中
document.body.appendChild(svg);