CODEWITHSUNDEEP
javascriptsvgd3.js
Gerrat
Gerrat

Reputation: 29740

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

I have a repeated image on a page.
If I add it manually (via d3.js), the image is clear, but if I use the image as a fill pattern it is blurry.
The issue is consistent on latest IE, FF, and Chrome.

Is there a way to make my fill pattern look the same as when I manually add the images?

blurry on top, clear on bottom

JS Fiddle for this is here, and code is included below.

SVG Code:

<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; });

Upvotes: 0

Views: 1820

Answers (1)

Robert Longson
Robert Longson

Reputation: 124324

The rect in the symbol is not 50 units wide it is 53 units wide (1/2 the stroke pokes out on each edge) so the pattern is subject to rescaling. If you change the rect to this

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

it becomes 50 units wide and the pattern looks sharper as there's no scaling.

Upvotes: 2

Related Questions