javascript选择自定义光标（svg）

Posted 2023-05-08

【中文标题】javascript选择自定义光标（svg）

【英文标题】：javascript selecting a custom cursor (svg)

【发布时间】：2015-01-28 21:35:10

【问题描述】：

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

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

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

有没有办法做到这一点，这样我就不必制作一堆具有不同填充的不同 svg？

谢谢

【问题讨论】：

不，当用作光标时，SVG 不能与之交互。

但是您可以让一些服务器端资源按需为您构建一个彩色光标。不要问我怎么做，但 jQuery 会像 $(this).css('cursor', 'url(make_pointer.php?color=#FC6) 9 30 auto')。嗯，有一个 MIME 问题需要克服，但我相信这是可能的。

如果您希望在客户端完成，那么应该可以为您想要的每个填充生成一个新的数据 uri。

【参考方案1】：

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

cursor: url('data:image/svg+xml;utf8,<svg fill="%23FF0000"  viewBox="0 0 24 24"  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。

button 
  cursor: url('data:image/svg+xml;utf8,<svg fill="%23FF0000"  viewBox="0 0 24 24"  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;


button  padding: 30px; 

<button>Hover<br>Here</button>

【讨论】：

谢谢它很好用。我什至没有用 %23 替换 #