当悬停在某个 div 上时,我试图使用 svg 图像作为光标,但我无法让它工作。我读到它应该像添加这个一样简单:
cursor: url(http://elusivethemes.com/assets/down.svg), auto;
但它似乎不会工作。奇怪的是,如果我使用来自不同 url 的不同 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 文件中明确声明高度和宽度。
如您所见,您提供的 .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属性,应该没问题。
只要确保您没有用百分比声明尺寸
关于css - 如何使用 svg 作为光标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37954356/