D3中的矩形描边模糊

Question

我正在尝试使用D3在SVG中绘制一个带有虚线强的矩形但是当我做顶部和底部的虚线是模糊的。这是我的代码：

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。