Is it possible to set the CSS cursor using the ID of an SVG document in the page?

user_183662 0
Viewed 68

On the MDN page of CSS url() function there are a few references to using the ID of an SVG element as the URL. Is it possible to use an SVG embedded in the page as a CSS cursor?

https://developer.mozilla.org/en-US/docs/Web/CSS/url()

Some examples from that page:

offset-path: url(#path);
mask-image: url("masks.svg#mask1");
filter: url(#svg-blur); /* the ID of an SVG that is embedded in the HTML page */

But that doesn't seem to work at all. Is there a way to do this?

.mydiv {
  width: 200px;
  height: 200px;
  cursor: url(#svgcursor) 8 8, grab;
}
<div class="mydiv">
</div>

<svg id="svgcursor" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrows-move" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10zM.146 8.354a.5.5 0 0 1 0-.708l2-2a.5.5 0 1 1 .708.708L1.707 7.5H5.5a.5.5 0 0 1 0 1H1.707l1.147 1.146a.5.5 0 0 1-.708.708l-2-2zM10 8a.5.5 0 0 1 .5-.5h3.793l-1.147-1.146a.5.5 0 0 1 .708-.708l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L14.293 8.5H10.5A.5.5 0 0 1 10 8z"/>
</svg>

I'm using react-boostrap-icons, so it'd be quite convenient to be able to reference an icon inside the document from CSS and use icons as the cursor, rather than downloading the SVG files separately.

reactjs svg css html
2 Answers

You can't reference a file, but you can use a file:

.mydiv {
  background:pink;
  width: 100px;
  height: 100px;
  cursor: url("data:image/svg+xml;charset=UTF-8,%3csvg id='svgcursor' xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrows-move' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10zM.146 8.354a.5.5 0 0 1 0-.708l2-2a.5.5 0 1 1 .708.708L1.707 7.5H5.5a.5.5 0 0 1 0 1H1.707l1.147 1.146a.5.5 0 0 1-.708.708l-2-2zM10 8a.5.5 0 0 1 .5-.5h3.793l-1.147-1.146a.5.5 0 0 1 .708-.708l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L14.293 8.5H10.5A.5.5 0 0 1 10 8z'/%3e%3c/svg%3e") 8 8, grab;
}
<div class="mydiv"></div>

user_25208000

NO.

For cursor, url() can only hold the location reference of an image file. IDs won't work.

From MDN Docs

A url(…) or a comma separated list url(…), url(…), …, pointing to an image file. More than one url() may be provided as fallbacks, in case some cursor image types are not supported. A non-URL fallback (one or more of the keyword values) must be at the end of the fallback list.

user_26926880
Related