Почему изображение SVG размыто при использовании шаблона заполнения?

Question

У меня есть повторное изображение на странице.
Если я добавлю его вручную (через d3.js), изображение будет чистым, но если я использую изображение в качестве шаблона заполнения, оно будет размыто.
Вопрос совместим с последними версиями IE, FF и Chrome.

Есть ли способ сделать мой шаблон заполнения таким же, как при ручном добавлении изображений?

JS Fiddle для этого here и код приведен ниже.

SVG Код:

<svg> 
    <defs> 

     <symbol id="rack"> 
     <rect height="50" width="50" rx="5" ry="5" fill="#C9CFD6" 
       stroke="#505356" stroke-width="3" /> 
     <line x1="8" y1="8" x2="36" y2="40" stroke="#505356" /> 
     <line x1="36" y1="8" x2="8" y2="40" stroke="#505356" /> 
     </symbol> 

     <!-- using this pattern looks blurry!!! --> 
     <pattern id="rack_pattern" patternUnits="userSpaceOnUse" 
       x="0" y="0" width="50" height="50"> 
     <use xlink:href="#rack" /> 
     </pattern> 

    </defs> 
</svg> 

Javascript:

// blurry using fill 
var svg = d3.select("body").style("background-color", "black") 
    .append("svg") 
    .attr("width", 900) 
    .attr("height", 500) 
    .attr("viewBox", "0 0 3700 500") 

svg.append("rect") 
    .attr("x", 0) 
    .attr("y", 0) 
    .attr("height", 300) 
    .attr("width", 3500) 
    .attr("fill", "url(#rack_pattern)"); 


var data = []; 
for (var r=0; r<7 ;r++) { 
    for (var c=1; c<71; c++) { 
     data.push(
      { 
       x: 3500 - (c * 50), 
       y: (r * 50) + 320 

      } 
     ); 
    }; 
}; 

// clearer adding iteratively 
var clear_section = svg.selectAll("use") 
    .data(data).enter() 
    .append("use") 
    .attr("xlink:href", "#rack") 
    .attr("x", function(d) { return d.x; }) 
    .attr("y", function(d) { return d.y; }); 

Answer 1

Прямоугольник в символе не 50 единиц шириной это 53 единицы в ширину (1/2 ход выкалывает на каждом ребре), поэтому шаблон подвергается перемасштабированию. Если изменить прямоугольник с этим

<rect height="47" width="47" rx="5" ry="5" fill="#C9CFD6" stroke="#505356" stroke-width="3" /> 

становится 50 единиц в ширину и картина выглядит острее, как нет никакого масштабирования.