我正在绘制一个带圆角的SVG路径。
使用crispEdges渲染时，角看起来像像素（左）。
但没有crispEdges，线条变得模糊（右图）：
有没有一种方法可以使路径更精确，但在拐角处没有像素？
附言：我尝试过其他的形状渲染值，都是一样的。
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
document.body.appendChild(svg);
svg.setAttribute("width", 2000 + "px");
svg.setAttribute("height",1000 + "px");
var svgPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
svgPath.setAttribute('stroke', 'blue');
svgPath.setAttribute('fill', 'none');
svgPath.setAttribute('d','M 350 350 L 350 400 C 350 403, 352 409, 358 410 L 450 410' );
svg.appendChild(svgPath);
svgPath.setAttribute('shape-rendering', 'crispEdges');
1条答案
按热度按时间sqxo8psd1#
默认的
stroke-width是1，因为我们渲染的SVG单位空间与浏览器像素空间的比例似乎是1：1，所以可以考虑将线条的坐标偏移0.5，以便笔划的绘制与像素网格完美对齐，从而减少低像素比屏幕上直线的模糊。