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