긴 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); 

다행히 귀하의 경우 해결 방법이있다. 바라기를 당신의 실제 상대는 다소 비슷하게 보입니다! 크롬 버그를 지적 http://jsfiddle.net/uKH4j/