CODEWITHSUNDEEP
svg
user978259
user978259

Reputation: 15

SVG rendering (auto-bluring)

When i try to render this svg sample, the line is bluring automatically and has 2px height:

<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" >                  
    <line x1="100" x2="400" y1="250" y2="250" stroke="black" />
</svg>

But when Y coordinates becomes 250.5, all is OK - line has 1px height.

It would be a solution (adding 0.5 pixels), but I need to use scale transform on elemets. On transformed elemets the problem again.

How to solve it? Thanks.

Upvotes: 1

Views: 1214

Answers (1)

therobyouknow
therobyouknow

Reputation: 6800

By blurring you mean anti-aliasing. Try the crisp-edges rendering mode, e.g.:

<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" >                  
    <line x1="100" x2="400" y1="250" y2="250" stroke="black" shape-rendering="crispEdges" />
</svg>

Upvotes: 2

Related Questions