如何使用svg作为光标

我试图使用svg图像作为光标时，鼠标悬停在某个div上，但我无法得到它的工作。我读过它应该是这样简单，只要添加：如何使用svg作为光标

cursor: url(http://elusivethemes.com/assets/down.svg), auto;

但它似乎不工作。奇怪的是，它是有效的，如果我使用不同的URL从不同的SVG图像。

任何想法？

在此先感谢。

来源

2016-06-21 Scott Hunter

也许尝试下载资源并在本地托管它。 – Quantastical

@HunterTurner我不会将此限定为[为CSS客户游标使用外部图像]（http://stackoverflow.com/questions/18551277/using-external-images-for-css-custom-cursors）的副本该问题仅提及基于图像的游标。当前的问题是由于所使用的图像是没有声明尺寸的SVG。因此，我不会将其标示为该问题的重复。 – GaijinJim

按照Mozilla Developer Network

与壁虎2.0开始（火狐4/3.3雷鸟/ SeaMonkey的2.1），壁虎还支持用于游标SVG图像格式。 但是，SVG 图像必须在其根SVG节点上包含长度值（不是百分比值）高度和宽度值。 JavaScript，CSS动画和声明式 SVG图像中的SMIL被忽略;例如，您无法使用SVG创建一个动画光标。

因此，您应该在.svg文件中明确声明高度和宽度。

您提供的.SVG没有尺寸声明，你可以看到：

<svg xmlns="http://www.w3.org/2000/svg" id="Capa_1" viewBox="0 0 320.995 320.995" x="0px" y="0px" height="200" xmlns:xml="http://www.w3.org/XML/1998/namespace" xml:space="preserve" viewbox="0 0 320.995 320.995" version="1.1">

如果添加width和height属性，你应该罚款。
只要确保你没有声明尺寸百分比

来源

2016-06-21 20:55:28 GaijinJim

好的谢谢你。我是否在css或svg本身中声明宽度和高度？ –

我可能是错的，但我相信它必须在SVG本身。不过，我会尽力做到这一点，以防万一 – GaijinJim

如果我能解决你的问题，如果你能接受我的答案，这将是非常好的。 – GaijinJim

如何使用svg作为光标

回答

相关问题