我在悬停时动态地将光标更改为本地SVG
$(element).on('mouseover', function () { $(this).css('cursor', 'url(svgs/pointer.svg) 9 30 auto'); };
这是工作正常,但我想选择的svg操纵其填充颜色。有没有什么方法可以做到这一点,这样我就不必用不同的填充来制作一堆不同的svg?谢谢
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。
#
%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>
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>
参考文献:
2条答案
按热度按时间vxf3dgd41#
您可以使用内联SVG。只需使用文本编辑器打开SVG文件。复制XML并使用它。只需更改填充值并将其重新分配给元素。
当使用这种技术时,你应该转义数据中的特殊字符。有些人喜欢Base64他们的图像,但对于SVG,你不需要它。在上面的例子中,我只需要将填充值中的
#
替换为%23
。ctehm74n2#
除了@达拉提供的答案之外,我还想补充一点,根据SVG的大小,curosor可能在不同的浏览器中工作,也可能不工作
参考文献: