1

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属性で勾配平滑化を増やすことは可能ですか？

4

1 に答える 1

4

これは、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/

于 2012-11-17T05:29:00.610 に答える