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

时间:2015-03-07 06:21:48

标签: javascript svg

我使用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 ">

Shape

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

提前致谢

1 个答案:

答案 0 :(得分:0)

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

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

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

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