javascript - 将 SVG 数据设置为光标

Question

我想通过jquery改变光标

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

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

但它没有:(

我知道已经有很多关于游标打开的话题，但没有一个是直接使用 SVG 数据的。

提前致谢

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

Answer 1

这是一个很好的问题，有两种解决方法:

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

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

请注意，为了简洁起见，我使用了 ES6 字符串，但如果您不使用转译器/想要支持旧浏览器，那么请更改为字符串连接。

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}')`;
}