In SVG, why the stroke are blurry in some specific positions

Vote count:

0

I just use SVG to draw rectangles, but I found the stroke were blurry when the position 'x' is an integer while others were not when the position 'x' is an integer plus 0.5

It can be reproduced both in Chrome and IE, has someone met this before?

<svg type="svg-chart" style="height: 100%; width: 100%; padding: 0px;">
    <g>
        <rect x="2" y="2" width="17" height="81" style="fill:rgb(31,119,180);fill-opacity:0.7019607843137254;stroke-width:1;stroke:rgb(255,0,0);stroke-opacity:1" class="gm-shape-grid-bar" type="shape" subtype="gbar" status="normal"></rect>
        <rect x="23" y="2" width="17.5" height="81" style="fill:rgb(31,119,180);fill-opacity:0.7019607843137254;stroke-width:1;stroke:rgb(255,0,0);stroke-opacity:1" class="gm-shape-grid-bar" type="shape" subtype="gbar" status="normal"></rect>
        <rect x="43.5" y="2" width="19.5" height="81" style="fill:rgb(31,119,180);fill-opacity:0.7019607843137254;stroke-width:1;stroke:rgb(255,0,0);stroke-opacity:1" class="gm-shape-grid-bar" type="shape" subtype="gbar"></rect>
    </g>
</svg>

asked 36 secs ago

keben hu

33

In SVG, why the stroke are blurry in some specific positions