SVG路径(Raphael.sketchpad.js)在Chrome中不平滑，但在Firefox中平滑

Question

我在图像上有一个SVG层(背景是png)。SVG由z-index放在图像的上方，并被赋予"pointer-events:none“。

在SVG上绘制的路径通过raphael.sketchpad.js完成，并创建一个路径(例如)，如下所示：

<path fill="none" stroke="#000000" d="M337.375,853L337.375,853L275.375,776L280.375,717L370.375,683L418.375,719L433.375,773L431.375,782L430.375,783L428.375,784L428.375,785L428.375,786" stroke-opacity="1" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-opacity: 1; stroke-linecap: round; stroke-linejoin: round; -webkit-user-select: text;"></path>

当我在mozilla上绘制一条圆形路径时，会生成许多路径点(大约20-25个)，并且曲线是平滑的。然而，当在Chrome中绘制类似的路径时，只会生成大约5-10个路径点，并且路径一点也不平滑。

我怎样才能纠正这个问题，使路径在每个浏览器上都能正常工作？

Answer 1

在chrome中这个问题可以通过使用catmullrom2bezier.js来解决，它将有助于更好地渲染所创建的路径。

有关更多详细信息，请访问以下链接https://gist.github.com/njvack/6925609