将SVG转为cursor指针样式

最新推荐文章于 2023-11-28 10:18:49 发布

CrxzYia

最新推荐文章于 2023-11-28 10:18:49 发布

阅读量241

点赞数

文章标签：服务器前端 javascript

本文链接：https://blog.csdn.net/weixin_41276201/article/details/133968855

版权

public SVG2Base64(svg: string) {
    return 'data:image/svg+xml;base64,' + btoa(svg)
}

const svg = '<svg xmlns="http://www.w3.org/2000/svg" height="32px" width="32px" color="white" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"><path d="M500 224h-30.364C455.724 130.325 381.675 56.276 288 42.364V12c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v30.364C130.325 56.276 56.276 130.325 42.364 224H12c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h30.364C56.276 381.675 130.325 455.724 224 469.636V500c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12v-30.364C381.675 455.724 455.724 381.675 469.636 288H500c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12zM288 404.634V364c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40.634C165.826 392.232 119.783 346.243 107.366 288H148c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-40.634C119.768 165.826 165.757 119.783 224 107.366V148c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12v-40.634C346.174 119.768 392.217 165.757 404.634 224H364c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40.634C392.232 346.174 346.243 392.217 288 404.634zM288 256c0 17.673-14.327 32-32 32s-32-14.327-32-32c0-17.673 14.327-32 32-32s32 14.327 32 32z" fill="currentColor"></path></svg>'
const _canvas = (canvasRef.value as HTMLElement)
_canvas.style.cursor = `url(SVG2Base64(svg)}) 16 16,auto`

其中，_canvas.style.cursor = `url(SVG2Base64(svg)}) 16 16,auto`中的 16 16表示svg图片x,y轴的偏移量

下面是naive-ui推荐的svg库

xicons - Icons for Vue & React