如何使用SVG作为游标 [英] How to use a svg as the cursor

问题描述

我在悬停在某个div上时尝试使用svg图像作为光标，但是我无法使其正常工作.香港专业教育学院读过，它应该像添加此一样简单:

Im trying to use a svg image as the cursor when hovering over a certain div but I cant get it working. Ive read that it should be as simple as adding this :

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

但是它似乎不起作用.奇怪的是，如果我使用来自不同URL的不同svg图像，那么它将起作用.

But it wont seem to work. The strange thing is it works if i use a different svg image from a different url.

有什么想法吗?

谢谢.

推荐答案

根据 Mozilla开发人员网络

从Gecko 2.0(Firefox 4/Thunderbird 3.3/SeaMonkey 2.1)开始， Gecko还支持游标的SVG图像格式. 但是，SVG 图片必须包含长度值(而非百分比值)的高度和 根SVG节点上的宽度. JavaScript，CSS动画和说明性 SVG图像内的SMIL将被忽略；您不能使用SVG创建 例如动画光标.

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文件中明确声明高度和宽度.

Therefore, you should explicitly declare the height and width in your .svg file.

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

The .svg you provided has no dimensions declared as you can see:

<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属性，应该没问题.
只需确保您没有用百分比声明尺寸

If you add the width and height attributes, you should be fine.
Just make sure you don't declare the dimensions with percentages

这篇关于如何使用SVG作为游标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！