Svg D3中矩形上的笔划模糊
我试图使用D3在SVG中绘制一个带有强虚线的矩形,但当我这样做时,顶部和底部虚线都很模糊。这是我的密码:Svg D3中矩形上的笔划模糊,svg,d3.js,Svg,D3.js,我试图使用D3在SVG中绘制一个带有强虚线的矩形,但当我这样做时,顶部和底部虚线都很模糊。这是我的密码: var width = 400, height = 400; var svg = d3.select('body') .append('svg') .attr('width', width) .attr('height', height) .append('g') .at
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')
以下是它在浏览器中的外观:
有没有办法让顶部和底部看起来像侧面一样脆?可能就是你想要的
shape rendering=“crispEdges”
应该为您的案例执行此操作。或者,您也可以使用属性,使顶部和底部位置为+0.5。我不建议使用“调整属性以使中心线位于像素中心”的方法,因为如果将SVG作为一个整体进行缩放,它将分解。而且因为在CSS中设置形状渲染要容易得多…我的问题是IE中的所有线条都很模糊。所以我在主SVG上添加了一个translate(0.5 0.5),并修复了它。也就是说,我绝对不喜欢0.5级的转变。看在上帝的份上,它们是可伸缩的矢量图形。可伸缩。shape rendering=“crispEdges”
导致d3转换中闪烁