长SVG对象中的梯度平滑

我用D3创建了一个填充了渐变的大对象，但是对象越大，渐变就越不平滑。以下是创建此类工件的代码示例：

 <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.1">
 <script type="text/javascript">

var w = 4000,
    h = 100,
    m = 50;

var svg = d3.select("body").append("svg:svg")
    .attr("width", w)
    .attr("height", h);

var gradient = svg.append("svg:defs")
  .append("svg:linearGradient")
    .attr("id", "gradient")
    .attr("x1", "0%")
    .attr("y1", "0%")
    .attr("x2", "100%")
    .attr("y2", "0%")
    .attr("spreadMethod", "pad");

for (i=0; i<m; i++) {
    gradient.append("svg:stop")
        .attr("offset", (i*100.0)/(m-1.0) + "%")
        .attr("stop-color", "hsl(240,0%,"+(i%2)*100+"%)")
        .attr("stop-opacity", 1);
}

svg.append("svg:rect")
    .attr("width", w)
    .attr("height", h)
    .style("fill", "url(#gradient)");

  </script>

var w=4000，
h=100，
m=50；
var svg=d3.select（“body”）.append（“svg:svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
var gradient=svg.append（“svg:defs”）
.append（“svg:linearGradient”）
.attr（“id”、“梯度”）
.attr（“x1”，“0%”）
.attr（“y1”，“0%”）
.attr（“x2”，“100%”）
.attr（“y2”，“0%”）
.attr（“扩展方法”、“pad”）；
对于（i=0；i这是Chrome渐变实现的一个bug，CSS渐变也会出现。除了Chrome之外，它在所有浏览器中都可以正常工作

幸运的是，在您的情况下，有一个解决方法：使用
spreadMethod:reflect；
，这将允许您在较小的区域中声明渐变，并让浏览器重复它：

var gradient = svg.append("svg:defs")
  .append("svg:linearGradient")
    .attr("id", "gradient")
    .attr("x1", "0%")
    .attr("y1", "0%")
    .attr("x2", "2%")
    .attr("y2", "0%")
    .attr("spreadMethod", "reflect");

gradient.append("svg:stop")
  .attr("offset", 0)
  .attr("stop-color", "black")
  .attr("stop-opacity", 1);

gradient.append("svg:stop")
  .attr("offset", 1)
  .attr("stop-color", "white")
  .attr("stop-opacity", 1);

这也是有更好的性能。希望你的实际viz看起来有点类似

您可以在此处看到演示：
这是Chrome实现渐变的一个错误，CSS渐变也会出现。除了Chrome之外，它在所有浏览器中都可以正常工作

幸运的是，在您的情况下，有一个解决方法：使用
spreadMethod:reflect；
，这将允许您在较小的区域中声明渐变，并让浏览器重复它：

var gradient = svg.append("svg:defs")
  .append("svg:linearGradient")
    .attr("id", "gradient")
    .attr("x1", "0%")
    .attr("y1", "0%")
    .attr("x2", "2%")
    .attr("y2", "0%")
    .attr("spreadMethod", "reflect");

gradient.append("svg:stop")
  .attr("offset", 0)
  .attr("stop-color", "black")
  .attr("stop-opacity", 1);

gradient.append("svg:stop")
  .attr("offset", 1)
  .attr("stop-color", "white")
  .attr("stop-opacity", 1);

这也是有更好的性能。希望你的实际viz看起来有点类似

您可以在此处看到演示：
感谢您指出Chrome的缺陷。在Firefox中，它非常有效。但是，在我的情况下，解决方法并不实用，因为不同的停止颜色应该有不同的值-数字应该代表测量中的不同密度（这就是我使用hsl的原因）。此外，将大图形分割为多个图形也不是一个选项。好吧，解决这个问题的困难方法是将
矩形分解为多个，使用多个渐变生成一个长的。不过，在两个矩形相交的地方，您可能会得到渲染效果。感谢您指出Chrome的错误。在Firefox中，它非常有效然而，在我的情况下，解决方法并不实用，因为不同的停止颜色应该有不同的值-数字应该代表测量中的不同密度（这就是我使用hsl的原因）。此外，将大图形分割为多个图形也不是一种选择。好吧，解决这一问题的困难方法是将
矩形
分解为它们的倍数，使用多个渐变生成一个长的。不过，在两个矩形相交的地方，可能会出现渲染瑕疵。