带有SVG图像的CSS光标指针

isr3a4wc 于 2023-06-25 发布在其他

关注(0)|答案(2)|浏览(184)

我试图应用一个自定义的光标指针与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>

css

来源：https://stackoverflow.com/questions/45962081/css-cursor-pointer-with-svg-image

2条答案

按热度按时间

hvvq6cgz1#

你的形象太大了。将width和height减小到小于128px的值。
CSS中光标的图标大小限制|MDN
...光标大小的限制是128×128px。较大的光标图像将被忽略。

示例：

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

.container {
  width: 50vw;
  height: 50vh;
  background: gold;
  cursor: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 512 512'%3e%3cg transform='rotate(45 256 256)'%3e%3crect id='r' x='16' y='216' width='480' height='80' rx='14'/%3e%3cuse href='%23r' transform='rotate(90 256 256)'/%3e%3c/g%3e%3c/svg%3e") 16 16, pointer;
}

<div class="container"></div>

编辑：为光标添加热点（中心坐标）（请参阅Dennis Bauszus的评论）*

赞(0）回复(0）举报 2023-06-25

x3naxklr2#

您也可以使用Blob URL插入到CSS的url函数中。

const blob = new Blob([**your SVG String**],{type: 'image/svg+xml'});
const URL = window.URL.createObjectURL(blob);

现在你可以使用这个URL变量，并可以插入CSS的url函数来获得所需的光标指针。

赞(0）回复(0）举报 2023-06-25

我来回答

带有SVG图像的CSS光标指针

2条答案

相关问题

热门标签

最新问答