英文:
Alternatives for shape-rendering of SVG path
问题
我正在绘制一个带有圆角的SVG路径。
在使用crispEdges渲染时，角落看起来像像素（左侧）。
但是如果不使用crispEdges，线条会模糊（右侧）：
有没有办法使路径更精确，但在角落没有像素？
P.S.：我尝试了其他shape-rendering值，效果一样。
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
document.body.appendChild(svg);
svg.setAttribute("width", "2000px");
svg.setAttribute("height", "1000px");
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');
英文:
I'm drawing a SVG path with rounded corners.
When using crispEdges rendering, the corners look like pixels (left).
But without crispEdges the lines blur (right):
Is there a way to make the path more precise but without pixels at the corners?
P.S.: I've tried other values of shape-rendering, it's the same.
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
得分: 0
默认的`stroke-width`是`1`，因为我们在SVG单位空间与浏览器像素空间之间似乎是1:1的比例进行渲染，你可以考虑将线条的坐标偏移`0.5`，以使描边的绘制完全对齐像素网格，从而减少在低像素比屏幕上直线上的模糊。
<!-- 开始片段: js 隐藏: false 控制台: true Babel: false -->
<!-- 语言: lang-js -->
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.5 350.5 L 350.5 400.5 C 350 403, 352 409, 358.5 410.5 L 450 410.5' );
svg.appendChild(svgPath);
<!-- 结束片段 -->
英文:
The default stroke-width is 1 and since we are rendering with what seems to be a 1:1 ratio of the SVG unit space to the browser pixel space, you could consider offsetting the coordinates of the lines by 0.5 so that the drawing of the stroke is aligned perfectly to the pixel grid, thus reducing the blurring on the straight lines on low pixel-ratio screens.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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.5 350.5 L 350.5 400.5 C 350 403, 352 409, 358.5 410.5 L 450 410.5' );
svg.appendChild(svgPath);
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论