D3 : SVG 배경 : Blurry

Question

화재로 놀고있는 다른 스크립팅 놈 :

나는 직사각형을 추가 한 SVG를 가지고 있습니다. 사각형에 나타나는 배경 이미지가 흐릿하지만 (IE보다 Chrome에서 이상하게 보입니다.)

다른 이미지 유형으로 재생했지만 동일한 문제가 발생합니다.

이미지가 흐리게 표시되는 것을 방지하려면 어떻게해야합니까? 아래에 첨부 된

코드 - 내 바이올린 : - http://jsfiddle.net/FarinU/22jcj3vc/

 var spaceWidth = 600; 
     var spaceHeight = 300; 

     var myContainer = d3.select('#abc1') 
      .append('svg') 
      .attr('class', 'box') 
      .attr('width', spaceWidth) 
      .attr('height', spaceHeight); 

     var pattern = myContainer.append("defs") 
      .append("pattern") 
      .attr("id", "bg") 
      .attr("patternUnits", "userSpaceOnUser") 
      .attr('width', "200px") 
      .attr('height', "200px") 
      .append("image") 
      .attr("xlink:href", "http://www.bbc.co.uk/commissioning/images/img-bbc-one-logo-small.gif") 
      .attr('width', "200px") 
      .attr('height', "200px"); 

     var rectangle = myContainer.selectAll("rectangle") 
      .data([{ }]) 
      .enter() 
      .append('svg:rect') 
      .attr("x", 10) 
      .attr("y", 10) 
      .attr("width", 300) 
      .attr("height", 200) 
      .style("fill", "url(#bg)") 
      .style("stroke", "green") 
      .style("stroke-width", "5"); 

감사합니다.

Answer 1

당신은 오타가 : 그것은 "userSpaceOnUse" 대신 "userSpaceOnUser"해야한다 :

.attr("patternUnits", "userSpaceOnUse") // <---- delete last "r" 

이 updated fiddle here를 참조하십시오.

패턴에 사용하는 이미지는 112x63 픽셀이며 300x200 픽셀로 늘리는 것입니다. 결과적으로 여전히 약간 흐리게 보입니다. 다시 112 x 63 픽셀로 축소하면 매우 선명합니다.