Question

我在图像上有一个SVG图层（背景中的png）。通过z-index将SVG放在图像上方，并给出＆＃34; pointer-events：none＆＃34;。

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

使用catmullrom2bezier.js可解决Chrome中的此问题它将有助于更好地渲染创建的路径。

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

SVG路径（Raphael.sketchpad.js）在Chrome中不流畅，但在Firefox中流畅

1 个答案: