SVG for cursor says invalid property value

Question

I would like to change the cursor to an SVG when the cursor is within #square. I have attempted below by minifying the SVG and setting the cursor value in CSS, however, I'm getting the error:

Invalid Property Value

What am I doing wrong here? Any help to greatly appreciated.

#square {
  height: 250px;
  width: 250px;
  background-color: yellow;
  cursor: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' height='16' width='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E");
}

<div id="square"></div>

Possible duplicate of [css cursor using data-uri](https://stackoverflow.com/questions/13932291/css-cursor-using-data-uri) — Kaiido, Jan 03 '19 at 01:52

score 1 · Answer 1 · edited Jan 03 '19 at 01:58

1

You need to add a fallback

cursor: url("data:image/svg+xml,..."), auto;

#square {
  height: 250px;
  width: 250px;
  background-color: yellow;
  cursor: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' height='16' width='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E"), auto;
}

<div id="square"></div>

read this:MDN Using URL values for the cursor property

edited Jan 03 '19 at 01:58

Kaiido

123,334
13
219
285

answered Jan 03 '19 at 01:52

Li Lin

53
1
4

For next time, you can improve your answer by clicking "Copy snippet to answer" from the question's snippet, then edit that snippet with your fix. – Kaiido Jan 03 '19 at 01:55

score 0 · Answer 2 · answered Aug 16 '20 at 19:55

0

You will also get this error if you try to assign:

height: 250

instead of

height: 250px

Like the error says, you should scrutinize the value and see if it's the kind of thing that that property expects.

answered Aug 16 '20 at 19:55

MatrixManAtYrService

8,023
1
50
61

SVG for cursor says invalid property value

2 Answers2