11

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;

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

Any ideas ?

Thanks in advance.

Scott Hunter
  • 385
  • 5
  • 24
  • Maybe try downloading the resource and hosting it locally. – jeffjenx Jun 21 '16 at 20:54
  • @HunterTurner I wouldn't qualify this as a duplicate of [Using external images for CSS customer cursors](http://stackoverflow.com/questions/18551277/using-external-images-for-css-custom-cursors) as that question only mentions about image-based cursors. The current issue happens due to the fact that the image used is an SVG without declared dimensions. Therefore, I wouldn't flag it as a duplicate of that question. – Takoyaro Jun 21 '16 at 21:03

1 Answers1

14

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

Takoyaro
  • 928
  • 7
  • 14