Javascript D3中基于梯度位置的svg彩色路径

我正在处理一组svg路径，我想根据它们在渐变上的位置为它们着色。下面的图片是我的情况的草图。不是实际的图表

我一直在四处挖掘，似乎面具可能是一个解决方案，但我似乎无法让它工作

以下是我的代码片段：

var overlaySvg = svg.append('g')
    .attr('class', 'overlay-svg');

var defs = svg.append('defs');

var gradient = defs.append("linearGradient")
    .attr("id", "gradient")
    .attr('gradientUnits', 'userSpaceOnUse')
    .attr("x1", "0")
    .attr("y1", "0")
    .attr("x2", "100%")
    .attr("y2", "0%");

gradient.append("stop")
    .attr("offset", "10%")
    .attr("stop-color", "#0081c5");

gradient.append("stop")
    .attr("offset", "50%")
    .attr("stop-color", "#aaa");

gradient.append("stop")
    .attr("offset", "80%")
    .attr("stop-color", "#ed1c24");

var rect = mask.append('rect')
    .attr("width", width)
    .attr("height", height)

svg.selectAll('g.chart-container path')
  .attr('d', line)
  .classed('line', true)
  .attr('stroke', 'url(#gradient)')
  .attr("mask", "url(#gradient-mask)");

我做错了什么？还有其他选择吗？过滤器是否适合这种情况？谢谢你的帮助

更新： 以下是我的实际图表：

---

您不需要遮罩，只需使用渐变填充，其中渐变已使用gradientUnits=“userSpaceOnUse”定义。通过这种方式，渐变在用户空间中定义，通过适当的停止，您将获得正确的颜色，以在每个x值填充您的形状

---

您不需要遮罩，只需使用渐变填充，其中渐变已使用gradientUnits=“userSpaceOnUse”定义。通过这种方式，渐变在用户空间中定义，通过适当的停止，您将获得正确的颜色，以在每个x值填充您的形状

迈克尔，谢谢你的回复。看来我离目标越来越近了。我用一张图片更新了我的问题，使我的图表现在看起来像什么。理想情况下，我想做的是根据渐变将线条着色，但隐藏其后面的矩形。这就是我询问掩码的原因。您不需要掩码-用SVG片段更新了答案。在您的代码中，您指定了userSpaceOnUse，但实际上输入了百分比，这些百分比被解释为以像素为单位的0和1。在SVG中，您可以修复与主绘图画布相关的问题，这与CSS的工作方式确实不同。谢谢您，Michael，谢谢您的回复。看来我离目标越来越近了。我用一张图片更新了我的问题，使我的图表现在看起来像什么。理想情况下，我想做的是根据渐变将线条着色，但隐藏其后面的矩形。这就是我询问掩码的原因。您不需要掩码-用SVG片段更新了答案。在您的代码中，您指定了userSpaceOnUse，但实际上输入了百分比，这些百分比被解释为以像素为单位的0和1。在SVG中，您可以修复与主绘图画布相关的内容，这与CSS的工作方式确实不同。