css - 如何使用 svg 作为光标

Question

当悬停在某个 div 上时，我试图使用 svg 图像作为光标，但我无法让它工作。我读到它应该像添加这个一样简单:

cursor: url(http://elusivethemes.com/assets/down.svg), auto;

但它似乎不会工作。奇怪的是，如果我使用来自不同 url 的不同 svg 图像，它会起作用。

有什么想法吗？

提前致谢。

Answer 1

根据Mozilla Developer Network

Starting with Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), Gecko also supports the SVG image format for cursors. However, the SVG image must contain a length-valued (not percentage-valued) height and width on its root SVG node. JavaScript, CSS animation, and declarative SMIL inside an SVG image are ignored; you can't use SVG to create an animated cursor, for example.

因此，您应该在 .svg 文件中明确声明高度和宽度。

如您所见，您提供的 .svg 没有声明尺寸:

<svg xmlns="http://www.w3.org/2000/svg" id="Capa_1" viewBox="0 0 320.995 320.995" x="0px" y="0px" height="200" xmlns:xml="http://www.w3.org/XML/1998/namespace" xml:space="preserve" viewbox="0 0 320.995 320.995" version="1.1">

如果加上width和height属性，应该没问题。
只要确保您没有用百分比声明尺寸