SVG路径与裁剪问题咨询：闭合异常、viewBox及模糊边缘

问题1：圆形路径终点与起点重合时无法显示的原因 #

当你用椭圆弧（A）命令绘制圆形，且终点与起点完全一致（如(12,0)）时，SVG渲染引擎会判定这段弧的长度为0——因为起点和终点没有位移，弧的计算逻辑会认为没有需要绘制的图形。加上z闭合路径后，整个路径是一个零面积的闭合图形，自然不会被渲染。

而将终点设为(11.99,0)时，起点和终点存在微小位移，弧命令会计算出一段极短但实际存在的圆弧，再通过z闭合后形成一个完整的闭合区域，渲染引擎就会正常填充显示。

另外要注意：绘制完整圆形的标准A命令写法，其实可以不用依赖z闭合，比如M12,0 A12,12 0 1 1 12,0本身就会生成闭合圆形，但部分渲染引擎对这种起点终点重合的弧处理存在兼容性问题，微小偏移是规避该问题的实用技巧。

问题2：viewBox与SVG物理尺寸的等价性 #

当SVG的width和height设为24px，且preserveAspectRatio保持默认的xMidYMid meet（或未修改）时，viewBox="0 0 24 24"的24个逻辑单位会完全映射到24px的物理像素，此时数值上是等价的，但本质是坐标系统的映射关系，而非“单位等价”：

• 如果后续修改SVG的物理尺寸（比如设为48px），viewBox的24个逻辑单位会对应48px的物理像素，此时数值不再相等；
• 如果调整preserveAspectRatio为非等比例缩放（如none），viewBox的宽高单位会分别映射到SVG的宽高像素，也会打破数值等价。

只有在SVG物理尺寸与viewBox的宽高完全匹配，且保持等比例缩放的情况下，两者的数值才会一一对应。

问题3：反向绘制矩形裁剪边缘模糊的修复 #

边缘模糊的核心原因是路径没有对齐屏幕像素网格：当SVG的逻辑坐标（viewBox单位）与物理像素1:1映射时，若路径的边缘落在两个物理像素的中间（即逻辑坐标为整数），渲染引擎会通过抗锯齿处理填充边缘的半透明像素，导致模糊感。

修复方法有两种：

1. 调整路径坐标到半像素位置：如果viewBox是0 0 24 24且SVG尺寸为24px，将裁剪矩形的坐标设置为x+0.5、y+0.5（比如M12.5,6.5 L18.5,6.5 ...），让路径边缘正好对齐物理像素的中心，避免跨像素渲染；
2. 启用清晰边缘渲染：给SVG或path元素添加shape-rendering="crispEdges"属性，强制渲染引擎关闭抗锯齿，直接对齐像素边界绘制，但该属性会影响所有矢量图形的渲染效果，需根据场景使用。

另外要确保反向绘制的路径方向正确（顺时针/逆时针符合裁剪规则），错误的路径方向可能导致裁剪区域异常，间接加剧边缘问题。

内容的提问来源于stack exchange，提问作者Slevin