带有 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
CSS Cursor pointer with SVG image
提问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 width
and height
to something less than 128px.
你的图片太大了。将width
和减小height
到小于 128 像素的值。
...the limit of the cursor size is 128×128px. Larger cursor images are ignored.
...光标大小的限制是 128×128px。较大的光标图像将被忽略。
Example:
https://jsfiddle.net/xhk4zo8y/