在D3模糊中对笔触进行描边 [英] Stroke on rect in D3 blurry

问题描述

我正在尝试使用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/

这是浏览器中的外观:

有什么方法可以使顶部和底部看起来像侧面吗?

解决方案

shape-渲染可能就是您想要的. shape-rendering="crispEdges"应该适合您的情况.或者，您可以调整y和height 属性，以使顶部和底部的位置为+ 0.5.

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:

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/

Here is what it looks like in the browser:

Any way to get the top and bottom crisp looking like the sides?

解决方案

shape-rendering is probably what you want. shape-rendering="crispEdges" should do it for your case. Alternatively you could adjust the y and height attributes so that the top and bottom positions are + 0.5.

这篇关于在D3模糊中对笔触进行描边的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！