javascript选择自定义光标（svg） [英] javascript selecting a custom cursor (svg)

问题描述

我将鼠标动态更改为悬停时的游标为

I'm dynamically changing a cursor to a local svg on hover with

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

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

Thats working fine but I'd like to select that svg to manipulate its fill color.

有什么方法可以做到这一点，所以我不必做一堆不同的svgs与不同的填充？

Is there any way to do this so I don't have to make a bunch of different svgs with different fills?

感谢

推荐答案

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

You can use inline SVG. Just open your SVG file with your text editor. Copy the XML and use it instead. Just change the fill value and reassign it to the element.

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 替换填充值中的＃。

When using this technique you should escape special chars in the data. Some people prefer to Base64 their images but for SVG you don't need it. In the example above I only had to replace # in the fill value with %23.

这篇关于javascript选择自定义光标（svg）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！