SVG 路径（Raphael.sketchpad.js）在 Chrome 中不平滑，但在 Firefox 中平滑答案

【问题标题】：SVG path(Raphael.sketchpad.js) not smooth in Chrome, but smooth in FirefoxSVG 路径（Raphael.sketchpad.js）在 Chrome 中不平滑，但在 Firefox 中平滑
【发布时间】：2014-06-09 07:27:18
【问题描述】：

我在图像上有一个 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个路径点，路径一点都不平滑。

我该如何纠正这个问题，以便路径在每个浏览器上都能正常工作？

【问题讨论】：

请在crbug.com 提交错误，并附上显示问题的完整测试用例。

标签： google-chrome svg raphael mozilla

【解决方案1】：

chrome中的这个问题可以通过catmullrom2bezier.js来解决这将有助于更好地呈现所创建的路径。

更多详情可以在以下链接中找到 https://gist.github.com/njvack/6925609

【讨论】：