CODEWITHSUNDEEP
csssvg
cal
cal

Reputation: 1863

SVG for cursor says invalid property value

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>

Upvotes: 0

Views: 980

Answers (2)

MatrixManAtYrService
MatrixManAtYrService

Reputation: 9131

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.

Upvotes: 0

Li Lin
Li Lin

Reputation: 53

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

Upvotes: 1

Related Questions