如何使用svg作为游标

Question

我试图使用svg图像作为光标悬停在某个div上但我不能让它工作.我读过它应该像添加这个一样简单:

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

但它似乎不起作用.奇怪的是,如果我使用来自不同网址的不同svg图像,它会起作用.

有任何想法吗 ？

提前致谢.

Answer 1

根据Mozilla开发者网络

从Gecko 2.0(Firefox 4/Thunderbird 3.3/SeaMonkey 2.1)开始,Gecko还支持游标的SVG图像格式.但是,SVG图像必须在其根SVG节点上包含长度值(非百分比值)的高度和宽度.忽略SVG图像中的JavaScript,CSS动画和声明性SMIL; 例如,您无法使用SVG创建动画光标.

因此,您应该在.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">

如果你添加宽度和高度属性,你应该没问题.
只需确保不要使用百分比声明尺寸