javascript使用svg图片自定义cursor鼠标样式

最新推荐文章于 2024-10-12 09:37:56 发布

七月复始

最新推荐文章于 2024-10-12 09:37:56 发布

阅读量3.2k

点赞数 2

文章标签： css3 css

本文链接：https://blog.csdn.net/Beca_H/article/details/105216946

版权

本文介绍了如何在JavaScript中利用SVG图片自定义cursor鼠标样式。内容包括cursor样式的默认设置，以及如何通过URL引用SVG文件来实现自定义鼠标指针效果，特别指出SVG格式的图片需要进行特定处理才能应用于cursor。

摘要由CSDN通过智能技术生成

cursor自定义鼠标样式（svg）

cursor自定义样式

cursor自定义样式

cursor样式设置：
1、使用默认的样式；
2、cursor:url(“图片路径”)，此处图片类型需要是“.cur”或者“.ani”格式
3、如果图片文件为SVG格式：需要将文件做一下处理：

const svgIcon = `<svg t="1585620942974" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1186" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><defs><style type="text/css"></style></defs><path d="M692.7 766.2c-3.6 0-7.4-0.1-11-0.3H344c-3.7 0.2-7.4 0.3-11 0.3-58.6 0-113.7-22.8-155.2-64.3-41.5-41.5-64.3-96.6-64.3-155.2 0-49.8 17.2-98.6 48.3-137.4 28.7-35.7 68.2-61.8 112