title: Stroke on rect in D3 blurry
body: <p>I am trying to draw a rectangle with a dashed strong in SVG using D3 but when I do the top and bottom dashed lines are blurry. Here is my code:</p>
  <pre><code>var width = 400,
          height = 400;
  
  var svg = d3.select('body')
          .append('svg')
              .attr('width', width)
              .attr('height', height)
          .append('g')
              .attr('transform', 'translate('+height/2+','+width/2+')');
  
  svg.append('rect')
      .attr('width', '185')
      .attr('height', '45')
      .attr('x', -height/2+185/2)
      .attr('y', -width/2+10)
      .attr('fill', 'rgba(0,0,0,0)')
      .attr('stroke', '#2378ae')
      .attr('stroke-dasharray', '10,5')
      .attr('stroke-linecap', 'butt')
      .attr('stroke-width', '3')
  </code></pre>
  <p><a href="http://jsfiddle.net/sigscotty/9H9PX/" rel="noreferrer">http://jsfiddle.net/sigscotty/9H9PX/</a></p>
  <p>Here is what it looks like in the browser:</p>
  <p><img src="https://i.stack.imgur.com/oOi6F.png" alt="enter image description here" /></p>
  <p>Any way to get the top and bottom crisp looking like the sides?</p>