jquery JavaScript选择自定义光标(svg)

vqlkdk9b  于 2023-06-22  发布在  jQuery
关注(0)|答案(2)|浏览(138)

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

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

这是工作正常,但我想选择的svg操纵其填充颜色。
有没有什么方法可以做到这一点,这样我就不必用不同的填充来制作一堆不同的svg?
谢谢

vxf3dgd4

vxf3dgd41#

您可以使用内联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

button {
  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;
}

button { padding: 30px; }
<button>Hover<br>Here</button>
ctehm74n

ctehm74n2#

除了@达拉提供的答案之外,我还想补充一点,根据SVG的大小,curosor可能在不同的浏览器中工作,也可能不工作

button {
  padding: 30px;
}

#btnSmall {
  cursor: url('data:image/svg+xml;utf8,<svg fill="%23FF0000" height="24" viewBox="0 0 24 24" width="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;
  background: mediumseagreen;
}

#btnLarge {
  cursor: url('data:image/svg+xml;utf8,<svg fill="%23FF0000" height="40" viewBox="0 0 24 24" width="40" 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;
  background: orange;
}

#flex {
  display: flex;
  gap: 20px;
  text-align: center
}

#flex>div {
  padding: 5px;
  border: 1px solid darkgray;
  border-radius: 5px;
}
<div id="flex">
  <div>
    <p>Small SVG icons work</p>
    <button id="btnSmall">Hover<br>Here</button>
  </div>

  <div>
    <p>Large SVG icons don't work in chrome</p>
    <button id="btnLarge">Hover<br>Here</button>
  </div>
</div>

参考文献:

相关问题