为什么我的 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 改成这个

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

它变成 50 个单位宽并且图案看起来更清晰，因为没有缩放。

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

Why is my SVG image blurry when using a fill pattern?

javascript

svg

d3.js