将 SVG 数据设置为光标

Question

我想通过 jquery

更改光标

问题是我不需要任何外部文件或来源。我也希望它是一个 SVG，所以我认为这会起作用：

$("html").css("cursor: url('<svg><circle cx="5.7" cy="6.2" r="6"/></svg>'), auto");

但它没有:(

我知道已经有很多关于游标打开的话题，但是 none 其中有直接的 SVG 数据。

提前致谢

PS：是否可以动态地为该数据设置动画？

Answer 1

您确实可以将 SVG 用于游标，但您需要将 SVG 另存为自己的文件并引用它：

cursor: url('/path/to/your/graphic.svg');

Answer 2

这是个好问题，有两种解法：

1) 创建一个Blob url 并传递svg 数据并将url 传递给属性值

2) 使用数据 url，但有一个问题 - 如果您不指定尺寸，则光标将不会改变，因为浏览器不知道它的大小。此外，您需要添加 xmlns 标签，否则浏览器仍然不会显示它。

请注意，为简洁起见，我使用了 ES6 字符串，但如果您不使用 transpiler/want 来支持旧浏览器，请更改为字符串连接。

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>

PS 如果您担心 svg 数据中的无效字符，您也可以使用 base64 字符串：

function svgToBase64Url(svgString, width, height) {
  const base64SVG = btoa(`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="${width}px" height="${height}px">${svgString}</svg>`);
  return `url('data:image/svg+xml;base64,${base64SVG}')`;
}

将 SVG 数据设置为光标

Set SVG data as cursor

javascript

css

svg

cursor

我想通过 jquery