带有 SVG 图像的 CSS 光标指针答案

【问题标题】：CSS Cursor pointer with SVG image带有 SVG 图像的 CSS 光标指针
【发布时间】：2018-02-08 06:23:41
【问题描述】：

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

这是我的代码。

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

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

谢谢

更新

这是 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>

【问题讨论】：

SVG 文件中有什么？它在根元素上是否具有非百分比的高度和宽度属性？
@RobertLongson 我已经用 SVG 代码更新了问题
How to use a svg as the cursor的可能重复

标签： css svg

【解决方案1】：

您的图片太大了。将width 和height 缩小到小于128px。

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

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

示例：

cursor: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' ...") 16 16, pointer;

https://jsfiddle.net/bx4og7n5/

编辑：为光标添加了 hotspot (center coordinates)（参见 Dennis Bauszus 的评论）

【讨论】：

谢谢！它工作正常！在小提琴中我看到你在 CSS 中移动了 svg，它是 base64 编码吗？
它实际上不是 base64（尽管这也是一个选项）。这是 SVG 的 XML 原样，只有几个字符被编码以使其可读，同时仍然是有效的 CSS。本文解释了该技术：codepen.io/tigt/post/optimizing-svgs-in-data-uris
我也遇到了同样的问题。但在我的情况下，svg 被压缩并且没有宽度和高度属性，只有 viewBox。一旦我设置了这些，它们就可以正常工作了。
很好的例子。不过，您可能需要添加夹点 x、y 以使图标居中。
@honk31 谢谢！有趣的是，宽度/高度没有任何影响，但需要存在。