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

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 >
</div>

<svg id="svgcursor" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"  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.

CodePudding user response：

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.

CodePudding user response：

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,") 8 8, grab;
}

<div ></div>