如何使用SVG渐变显示颜色不一相对于有色区域

我使用SVG和D3创建条形图，并有关于如何着色他们一个问题的大小。我搜索在本网站和其他许多问题，尚未发现有同样的问题的人。如何使用SVG渐变显示颜色不一相对于有色区域

我希望每个酒吧从底部开始，使用一种颜色（例如黄色），并且随着酒吧变得更高，逐渐混合更多第二种颜色（红色，例如），以便酒吧在他们的最大潜在高度将只是第二种颜色。在这个例子中，这是酒吧的顶部一半的位势高度将是橙色。

我能够编写一个函数来产生，对于任何给定的高度，根据需要，将着色巴的独特线性梯度的棒。

但是，由于该图是动态的，并且随着数据刷新，条形图的高度可能每秒变化很多次，所以每次创建和应用新渐变并且对于每个条形图肯定是无效的并且可能导致严重滞后刷新酒吧。（我承认我实际上没有尝试过除静态测试用例以外的其他任何东西，所以我可能会错误地假设最后一个假设。）

使用静态渐变当然会产生像这样的颜色混合根据栏的高度，而不是区域的高度：

Using static gradient

在我需要的情况下，但是，小酒吧应该有分别很少红色或深蓝色。

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

创建应用到SVG区域本身（容易）
已经所说的梯度以某种方式掩盖一个梯度（容易）
然后选择性地表示的曲线图的条的矩形下方揭露？（???）

或者，有没有其他一些技术可以忽略？

感谢

来源

2012-10-10 SwimsZoots

在平原SVG可以指定是否将渐变的坐标系统延伸到填充形状。我不知道这样D3，我不知道是否或如何可用。 –

这实现起来很简单，但有点难以把握，你需要指定梯度单位是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")

这里你可以看到一个演示：http://jsfiddle.net/ZCwrx/

来源

2012-10-11 00:00:27 Duopixel

完美！正是我需要的。 – SwimsZoots

如何使用SVG渐变显示颜色不一相对于有色区域

回答

相关问题