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

Question

我使用svg路径绘制了一个形状。形状只不过是如下所示的矩形。线条模糊，不清楚。请在下面找到代码段和屏幕截图。

<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 ">

我是否需要为path元素设置任何属性才能正确渲染而不会在形状中出现任何模糊。

提前致谢

Answer 1

你看到的模糊是消除锯齿，真的没有办法完全摆脱它，但你可以尝试减少它的一些事情：

• 尝试将您的行偏移0.5px，这样他们就不会完全落在像素边界上。您可以按0.5 0.5进行翻译，也可以在路径中添加偏移量（即从107.5开始）。有时这可以提供帮助。

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

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