Обводка на прямоугольнике в D3 размыта

Question

Я пытаюсь нарисовать прямоугольник с пунктиром сильным в SVG с помощью D3, но когда я делаю верхнюю и нижнюю пунктирные линии, размыты. Вот мой код:

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') 

http://jsfiddle.net/sigscotty/9H9PX/

Вот как это выглядит в браузере:

Любой способ получить сверху и снизу хрустящий, глядя, как стороны?

Answer 1

shape-rendering возможно, что вы хотите. shape-rendering="crispEdges" должен сделать это для вашего дела. В качестве альтернативы вы можете использовать атрибуты adjust the y and height, чтобы верхнее и нижнее положения составляли + 0,5.