使用填充图案时，为什么我的SVG图像模糊？

Question

我在页面上有重复的图像 如果我手动添加（通过d3.js），图像清晰，但如果我将图像用作填充图案则模糊。
问题在最新的IE，FF和Chrome上是一致的。

有没有办法让我的填充图案看起来与手动添加图片时相同？

JS Fiddle for this is 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个单位宽，并且图案看起来更清晰，因为没有缩放。