如何处理SVG像素捕捉 [英] how to handle SVG pixel snapping

问题描述

我正在尝试使用path元素渲染两条svg线. 第一行的宽度为1px，很清晰 第二行的宽度为2px，并且模糊
两者的笔划宽度相同. 如何解决此问题

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
 <path style="stroke-width:1;stroke:red;opacity:1;" d="M  300.5  250 L  300.5 300 "></path>
 <path style=" stroke-width:1;stroke:red;opacity:1;" d="M  350    250 L  350  300  "></path> 
</svg>

解决方案

主要是因为0.5的偏移量使线条清晰. 默认情况下，整数坐标映射到像素正方形的交点.因此，宽度为1的水平/垂直线以像素行之间的边界为中心，并延伸到任一侧像素的一半.

因此，要固定第二行，请将坐标添加0.5或使用样式shape-rendering: crispEdges.请注意， crispEdges 可以防止锯齿，因此水平/垂直线很清晰，但斜线看起来很块状.

stroke-width = 1也不是有效的CSS语法.第一个示例stroke-width:1正确.

I am trying to render two svg lines using path element. The first line has 1px width and it is sharp The second line has 2px width and it is blurred
The stroke-width is the same for both. How to fix this

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
 <path style="stroke-width:1;stroke:red;opacity:1;" d="M  300.5  250 L  300.5 300 "></path>
 <path style=" stroke-width:1;stroke:red;opacity:1;" d="M  350    250 L  350  300  "></path> 
</svg>

解决方案

Mainly it's the 0.5 offset that makes the line sharp. By default, integer coordinates map to the intersections of the pixel squares. So a width-1 horizontal/vertical line is centered on the boundary between pixel rows and extends half way into the pixels on either side.

So to fix the second line either add 0.5 to the co-ordinates or use the style shape-rendering: crispEdges. Note that crispEdges prevents antialiasing so horizonal/vertical lines are crisp but angled lines look blocky.

Also stroke-width=1 is not valid CSS syntax. The first example stroke-width: 1 has it right.

这篇关于如何处理SVG像素捕捉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！