Question

我在使用

悬停时动态地将光标更改为本地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,<svg fill="%23FF0000" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>') 24 24, auto;

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

javascript选择自定义光标（svg）

1 个答案: