Question

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

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

但它似乎无法奏效。奇怪的是，如果我使用来自不同网址的不同svg图像，它会起作用。

有什么想法吗？

提前致谢。

Answer 1

根据Mozilla Developer Network

从Gecko 2.0开始（Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1）， Gecko还支持游标的SVG图像格式。 然而，SVG 图像必须包含长度值（不是百分比值）的高度和其根SVG节点上的宽度。 JavaScript，CSS动画和声明性 SVG图像中的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">

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

如何使用svg作为游标

1 个答案: