使用填充圖案時，為什么我的SVG圖像模糊？

Question

我在頁面上有重復的圖像。
如果手動添加（通過d3.js），則圖像清晰，但是如果將圖像用作填充圖案，則圖像會模糊。
在最新的IE，FF和Chrome上，該問題始終存在。

有沒有一種方法可以使填充圖案與手動添加圖像時的外觀相同？

JS Fiddle在這里 ，下面包含代碼。

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個單位寬，並且由於沒有縮放比例，因此圖案看起來更加清晰。