CSS Cursor Using Data-Uri

css cursor using data-uri

Add , auto after your data url like such:

cursor: url(data:image/png;base64,...), auto;

Not sure why this fixes the problem.

CSS Cursor Image using SVG Base64 URI

Which web browser are you using? Your code works fine in Google Chrome.

According to the spec at https://developer.mozilla.org/en-US/docs/Web/CSS/cursor/url it should work in Firefox too.

I guess you are using Internet Explorer? According to the documentation for IE at http://msdn.microsoft.com/en-us/library/ie/aa358795(v=vs.85).aspx, the cursor: url(uri); property must be a .cur or .ani file. It doesn't look like IE supports SVG cursors, except within the SVG file via SVGCursorElement (see http://msdn.microsoft.com/en-us/library/ie/bg124137(v=vs.85).aspx for details).

CSS Cursor pointer with SVG image

Your image is simply too large. Reduce the width and height to something less than 128px.

Icon size limits for cursors in CSS | MDN

...the limit of the cursor size is 128×128px. Larger cursor images are ignored.

Example:

cursor: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' ...") 16 16, pointer;

https://jsfiddle.net/bx4og7n5/

Edit: Added hotspot (center coordinates) for the cursor (see Dennis Bauszus' comment)

Set SVG data as cursor

This is a good question and there are two ways to solve it:

1) Create a Blob url and pass the svg data and pass the url to the property value

2) Use a data url, but there is a catch - if you don't specify dimensions then the cursor won't change as the browser doesn't know what size to make it. Furthermore you need to add the xmlns tags or the browser still won't display it.

Note that I've used ES6 strings for brevity but if you are not using a transpiler/want to support old browsers then change to string concatenation.

function svgUrl(svgString, width, height, viewBoxWidth, viewBoxHeight) {

  viewBoxWidth = viewBoxWidth || width;

  viewBoxHeight = viewBoxHeight || width;

  return `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="${width}" height="${height}" viewBox="0 0 ${viewBoxWidth} ${viewBoxHeight}">${svgString}</svg>')`;

}

$('html').css('cursor', `${svgUrl('<circle cx="100" cy="100" r="100"/>', 100, 100, 200, 200)}, auto`);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

add color to a cursor: url(data:image)

add fill attribute to fill='red'

html { cursor: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='32px' height='32px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E %3Cpath fill='red' d='M127 64A63 63 0 0 1 64 127 63 63 0 0 1 1 64 63 63 0 0 1 64 1 63 63 0 0 1 127 64Z'/%3E %3C/svg%3E"), pointer;

}

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

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.

---

Related Topics