javascript选择自定义光标（svg）

我在hover时动态地将光标更改为本地svg

$(element).on('mouseover', function () { $(this).css('cursor', 'url(svgs/pointer.svg) 9 30 auto'); }; 

这很好但我想选择那个svg来操纵它的填充颜色。

有没有办法做到这一点，所以我不必制作一堆不同的填充不同的svgs？

谢谢

Answer 1

您可以使用内联SVG。 只需使用文本编辑器打开SVG文件即可。 复制XML并改为使用它。 只需更改填充值并将其重新分配给元素即可。

 cursor: url('data:image/svg+xml;utf8,') 24 24, auto; 

使用此技术时，您应该在数据中转义特殊字符。 有些人喜欢Base64他们的图像，但对于SVG，你不需要它。 在上面的例子中，我只需要用%23替换填充值中的# 。