如何使用SVG渐变显示相对于彩色区域大小的不同颜色

我正在使用SVG和D3创建条形图，并且有一个关于如何给它们着色的问题。我在这个网站和其他网站上搜索了很多问题，还没有找到任何人有同样的问题

我希望每个条从底部开始使用一种颜色（例如黄色），随着条越来越高，逐渐混合更多的第二种颜色（例如红色），以便最大潜在高度的条仅为第二种颜色。在本例中，只有其潜在高度一半的条形顶部将为橙色

我能够编写一个函数，为任何给定高度的条生成一个唯一的线性渐变，可以根据需要为条着色

但是，由于此图形是动态的，并且随着数据的刷新，条形图的高度每秒可能会发生多次变化，因此每次为每个条形图创建和应用新的渐变肯定是无效的，并且可能导致刷新条形图时出现严重的延迟。（我承认，除了静态测试用例之外，我还没有尝试过其他方法，所以最后一个假设可能是错误的。）

当然，使用静态渐变会产生如下效果，其中颜色根据条的高度而不是区域的高度进行混合：

然而，在我想要的场景中，较小的条应该分别有很少的红色或深蓝色

最后，我的问题是：有没有办法

创建一个应用于SVG区域本身的渐变（简单）

说梯度不知怎么被掩盖了（容易）

然后在代表图形条的矩形下方有选择地揭开遮罩？（？）

或者，还有其他我忽略的技巧吗

---

感谢

这很容易实现，但有点难以掌握，您需要指定渐变单位为

userSpaceOnUse

，然后通过

x1

，

x2

，

y1

，

y2

，定义要应用渐变的区域：

var gradient = svg
    .append("linearGradient")
    .attr("y1", minY)
    .attr("y2", maxY)
    .attr("x1", "0")
    .attr("x2", "0")
    .attr("id", "gradient")
    .attr("gradientUnits", "userSpaceOnUse")

gradient
    .append("stop")
    .attr("offset", "0")
    .attr("stop-color", "#ff0")

gradient
    .append("stop")
    .attr("offset", "0.5")
    .attr("stop-color", "#f00")

---

您可以在这里看到一个演示：

在普通SVG中，您可以指定渐变的坐标系是否拉伸以填充形状。我不知道D3，所以我不知道它是否可用或如何可用。太好了！正是我需要的。