Im trying to use an SVG image as the cursor when hovering over a certain div, but I can't get it to work. I've read that it should be as simple as adding this:
cursor: url(http://elusivethemes.com/assets/down.svg), auto;
But it doesn't seem to work. The strange thing is that it works if I use a different SVG image from a different URL.
Any ideas?
Thanks in advance.
According to the Mozilla Developer Network
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.
Therefore, you should explicitly declare the height and width in your .svg file.
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">
If you add the width and height attributes, you should be fine.
Just make sure you don't declare the dimensions with percentages