我想通过jquery

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网址并传递svg数据并将网址传递给属性值

2）使用数据网址，但有一个问题 - 如果你没有指定尺寸，那么光标不会改变，因为浏览器不知道要制作它的尺寸。此外，您需要添加xmlns标记，否则浏览器仍然无法显示它。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

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

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

将SVG数据设置为光标

我想通过jquery

2 个答案: