长 SVG 对象中的渐变平滑

Question

我正在使用 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>

是否可以通过某些 SVG 属性来增加渐变平滑度？

Answer 1

这是 Chrome 渐变实现的一个错误，它也发生在 CSS 渐变中。 http://code.google.com/p/chromium/issues/detail?id=41756。它适用于除 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 看起来有些相似！

您可以在此处查看演示： http://jsfiddle.net/uKH4j/