有没有办法让Chrome显示SVG光标，就像在Safari中一样？

Question

我使用 SVG 文件作为 CSS 中的鼠标指针。 Safari 可以正确显示它，而 Chrome 会在其周围显示黑点，就像制作不良的透明 GIF 伪影一样。

分别检查 Safari 和 Chrome 中的 fiddle，你就会明白我的意思。

.element {
   ... 
   cursor: url(http://wiki.ooo4kids.org/images/b/b3/Cursor-Hand.svg), e-resize;
   ...
}

http://jsfiddle.net/cdolek/nx6st28k/7/

有没有办法让它们看起来一样？

Mac OS X 优胜美地 10.10.5 (14F1021)

• 左：Chrome 版本 46.0.2490.86（64 位）
• 右：Safari 版本 9.0.1（10601.2.7.2）

GIF 网址：https://dl.dropboxusercontent.com/u/1324709/screencap.gif

Answer 1

看起来像是 chrome 46 中的一个错误

Chrome 45：

Chrome 46：

Chrome 47：

Answer 2

我使用简单的圆形 SVG 作为光标时遇到了边缘伪影问题。在 SVG 行中添加

shape-rendering="crispEdges"

attribute 为我解决了这个问题。 不过，我仍然注意到模拟增加的 DPR 存在同样的问题。