如何将SVG用作鼠标指针

Question

我试图在悬停在特定的div上时使用svg图像作为光标，但我无法使其正常工作。我已经阅读过应该只需要添加以下内容：

cursor: url('image.svg'), auto;

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

但它似乎不起作用。奇怪的是，如果我使用来自不同URL的不同SVG图像，则可以工作。

有任何想法吗？

提前致谢。

- Scott Hunter

---

也许可以尝试下载资源并在本地托管。 - jeffjenx

@HunterTurner 我不认为这是使用外部图像作为CSS自定义光标的重复问题，因为那个问题只涉及基于图像的光标。当前的问题是由于使用的图像是没有声明尺寸的SVG而导致的。因此，我不会将其标记为该问题的重复。 - Takoyaro

Answer 1

根据Mozilla Developer Network的说法：

从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">

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

- Takoyaro

---

好的，非常感谢。我应该在CSS中声明宽度和高度还是在SVG本身中声明？ - Scott Hunter

我可能错了，但我认为它必须在SVG本身中。然而，我会尝试使用CSS来做到这一点，以防万一。 - Takoyaro