带有 SVG 图像的 CSS 光标指针

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/45962081/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 12:41:32  来源:igfitidea点击:

CSS Cursor pointer with SVG image

csssvg

提问by Alessio

I'm trying to apply a custom cursor pointer with an SVG image but it's not working, instead if I use a png image everything is working fine.

我正在尝试对 SVG 图像应用自定义光标指针,但它不起作用,相反,如果我使用 png 图像,则一切正常。

Here's my code.

这是我的代码。

.container {
  /* not working one */
  cursor: url("/images/icon-cross.svg"), auto;
  /* working one */
  cursor: url("/images/icon-cross.png"), auto;
}

Is there any trick/workaround to make it working also with SVG or it's something which is not supported?

是否有任何技巧/解决方法可以使其也与 SVG 一起使用,或者它不受支持?

Thanks

谢谢

UPDATE

更新

Here's the svg code:

这是 svg 代码:

 <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path d="M443.6,387.1L312.4,255.4l131.5-130c5.4-5.4,5.4-14.2,0-19.6l-37.4-37.6c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4
    L256,197.8L124.9,68.3c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4L68,105.9c-5.4,5.4-5.4,14.2,0,19.6l131.5,130L68.4,387.1
    c-2.6,2.6-4.1,6.1-4.1,9.8c0,3.7,1.4,7.2,4.1,9.8l37.4,37.6c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1L256,313.1l130.7,131.1
    c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1l37.4-37.6c2.6-2.6,4.1-6.1,4.1-9.8C447.7,393.2,446.2,389.7,443.6,387.1z"/>
</svg>

回答by Sphinxxx

Your image is simply too large. Reduce the widthand heightto something less than 128px.

你的图片太大了。将width和减小height到小于 128 像素的值。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_User_Interface/Using_URL_values_for_the_cursor_property#Limitations

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_User_Interface/Using_URL_values_for_the_cursor_property#Limitations

...the limit of the cursor size is 128×128px. Larger cursor images are ignored.

...光标大小的限制是 128×128px。较大的光标图像将被忽略。

Example:
https://jsfiddle.net/xhk4zo8y/

示例:https:
//jsfiddle.net/xhk4zo8y/