I'm dynamically changing a cursor to a local svg on hover with

$(element).on('mouseover', function () {
    $(this).css('cursor', 'url(svgs/pointer.svg) 9 30 auto');
};

Thats working fine but I'd like to select that svg to manipulate its fill color.

Is there any way to do this so I don't have to make a bunch of different svgs with different fills?

Thanks

I'm dynamically changing a cursor to a local svg on hover with

$(element).on('mouseover', function () {
    $(this).css('cursor', 'url(svgs/pointer.svg) 9 30 auto');
};

Thats working fine but I'd like to select that svg to manipulate its fill color.

Is there any way to do this so I don't have to make a bunch of different svgs with different fills?

Thanks

• javascript
• jquery
• css
• svg
• cursor

• No, when used as a cursor an SVG you can't interact with it. – Robert Longson Commented Nov 30, 2014 at 22:21
• But you could have some server-side resource build you a colored cursor on demand. Don't ask me how but the jQuery would be something like $(this).css('cursor', 'url(make_pointer.php?color=#FC6) 9 30 auto'). Mmm, there's a MIME issue to overe but I'm sure it's possible. – Roamer-1888 Commented Nov 30, 2014 at 22:30
• If you want it to be done on the client-side then it should be possible to generate a new data uri for each fill you want. – Erik Dahlström Commented Dec 1, 2014 at 9:28

2 Answers 2

You can use inline SVG. Just open your SVG file with your text editor. Copy the XML and use it instead. Just change the fill value and reassign it to the element.

cursor: url('data:image/svg+xml;utf8,<svg fill="%23FF0000" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>') 24 24, auto;

When using this technique you should escape special chars in the data. Some people prefer to Base64 their images but for SVG you don't need it. In the example above I only had to replace # in the fill value with %23.

button {
  cursor: url('data:image/svg+xml;utf8,<svg fill="%23FF0000" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>') 24 24, auto;
}

button { padding: 30px; }

<button>Hover<br>Here</button>

In addition to the answer provided by @Dara, I would like to add that, depending on the size of the SVG, the curosor may or may not work in different browsers

button {
  padding: 30px;
}

#btnSmall {
  cursor: url('data:image/svg+xml;utf8,<svg fill="%23FF0000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>') 24 24, auto;
  background: mediumseagreen;
}

#btnLarge {
  cursor: url('data:image/svg+xml;utf8,<svg fill="%23FF0000" height="40" viewBox="0 0 24 24" width="40" xmlns="http://www.w3/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>') 24 24, auto;
  background: orange;
}

#flex {
  display: flex;
  gap: 20px;
  text-align: center
}

#flex>div {
  padding: 5px;
  border: 1px solid darkgray;
  border-radius: 5px;
}

<div id="flex">
  <div>
    <p>Small SVG icons work</p>
    <button id="btnSmall">Hover<br>Here</button>
  </div>

  <div>
    <p>Large SVG icons don't work in chrome</p>
    <button id="btnLarge">Hover<br>Here</button>
  </div>
</div>

References:

• https://developer.mozilla/en-US/docs/Web/CSS/cursor#icon_size_limits
• https://stackoverflow./a/46707611/6908282
• https://stackoverflow./a/66428386/6908282
• https://stackoverflow./a/45966695/6908282
• https://stackoverflow./a/18551357/6908282