长SVG对象中的渐变平滑

时间:2012-11-17 03:37:26

标签: svg d3.js gradient

我正在使用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属性增加渐变平滑效果?

1 个答案:

答案 0 :(得分:2)

这是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/