How to avoid blur SVG-shape?

Question

How to avoid blurring svg-shape with a percentagemargin? Here is the code:

HTML:

<div class="a"> <svg width="9" height="20"> <path fill="#000000" d="M4,1h1v17H4V1z" /> </svg> </div>

CSS:

.a { margin-left: 9%; }

Interestmarginsetting is needed for the proper functioning of the site.

This is due to the fractional offset of the main block when `margin-left: 9% 'falls, for example, at 397.5px.
So far, I'm flying round offsets in JS, but if there is a better solution, I will be glad to know about it.

nupnup 911 · Accepted Answer · 2016-01-25T17:17:50

I found another solution - disable shape smoothing by theshape-renderingproperty. The code will look like this:

<div class = "a"> <svg width="9" height="20"> <path fill="#000000" shape-rendering="crispEdges" d="M4,1h1v17H4V1z" /> </svg> </div>

nup

911

|

alenkinsalenkins 3.073 · Answer 2 · 2016-01-23T20:54:00

Try this:

<div class = "a"> <svg width="5" height="17" viewBox="0 0 5 17"> <path fill="#000000" d="M4,1h1v17H4V1z" /> </svg> </div>

alenkins

3.073

As I understand it, the difference is only inviewBox="0 0 5 17"and resized?This "solves" the problem only in the particular case, and, nevertheless, on even values of themargin-leftimage is slightly blurred.viewBoxitself will not solve the problem of non-integer coordinates.-nup
The difference in the size of the viewing area.If you limit the area strictly to the size of the figure, then the blur around the edges can be removed as much as possible for shapes whose contour coincides with the viewing borders:jsfiddle.net/d5an2hmL/1-alenkins

|

2 answers2