我在使用 svg 圆形按钮图像时遇到问题。当我用 2px 的边框(使用 svg 路径)绘制图像时,边框是模糊的。我将位置偏移 0.5 以防止模糊,但这似乎只适用于 1px 边框。在 FF 和 Chrome 中都显得模糊。
另外,我注意到使用带有圆角、边框 2px 的 svg rect 进行绘图没有同样的问题。线条很锐利。
<svg width="225" height="50" viewBox="-1.5 -1.5 225 50"><path d="m 103 0 l -93 0 c -5 0 -10 5 -10 10 l 0 22 c 0 5 5 10 10 10 l 93 0 z" stroke="#000" stroke-width="2px" fill="#fff" /><path d=" m 103 0 l 93 0 c 5 0 10 5 10 10 l 0 22 c 0 5 -5 10 -10 10 l -93 0 z" stroke="#000" stroke-width="2px" fill="#999" /></svg>