使用 SVG 路径绘制的形状不正确

Question

我已经使用 svg 路径绘制了一个形状。形状不过是如下绘制的矩形。线条很模糊，看不清楚。请在下面找到代码 sn-p 和屏幕截图。

<path fill="#D13F41" stroke="blue" stroke-width="1" opacity="1" d="M 107 457 L 107 457 L 456 491 L 434 498 L 79 462 ">

我是否需要为路径元素设置任何属性才能正确渲染而不会导致形状模糊。

提前致谢

Answer 1

您看到的模糊是抗锯齿，实际上没有办法完全消除它，但您可以尝试减少它：

• 尝试将线条偏移0.5px，这样它们就不会完全落在像素边界上。您可以通过0.5 0.5 进行翻译，或者将偏移量添加到您的路径（即从 107.5 开始）。有时这会有所帮助。

• 将笔画宽度设置为 1.5 而不是 1

• 在你的CSS中，设置shape-rendering: crispEdges;这告诉浏览器根本不做任何抗锯齿。非常适合水平和垂直线，但可能会使对角线看起来很糟糕。