title: In SVG, why the stroke are blurry in some specific positions
body: <p>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</p>
  
  <p>It can be reproduced both in Chrome and IE, has someone met this before?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg type="svg-chart" style="height: 100%; width: 100%; padding: 0px;"&gt;
      &lt;g&gt;
          &lt;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"&gt;&lt;/rect&gt;
          &lt;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"&gt;&lt;/rect&gt;
          &lt;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"&gt;&lt;/rect&gt;
      &lt;/g&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>