我使用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元素设置任何属性才能正确渲染而不会在形状中出现任何模糊。
提前致谢
答案 0 :(得分:0)
你看到的模糊是消除锯齿,真的没有办法完全摆脱它,但你可以尝试减少它的一些事情:
尝试将您的行偏移0.5px
,这样他们就不会完全落在像素边界上。您可以按0.5 0.5
进行翻译,也可以在路径中添加偏移量(即从107.5开始)。有时这可以提供帮助。
将笔触宽度设置为1.5
而不是1
在你的css中,设置shape-rendering: crispEdges;
这告诉浏览器根本不做任何抗锯齿。适用于水平和垂直线,但可能会使对角线看起来很糟糕。