Question

当光标位于#square内时，我想将光标更改为SVG。我在下面尝试过缩小SVG并在CSS中设置cursor值，但是，出现错误：

无效的属性值

我在这里做错了什么？任何帮助，不胜感激。

#square {
  height: 250px;
  width: 250px;
  background-color: yellow;
  cursor: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' height='16' width='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E");
}

<div id="square"></div>

Answer 1

您需要添加后备广告

cursor: url("data:image/svg+xml,..."), auto;

#square {
  height: 250px;
  width: 250px;
  background-color: yellow;
  cursor: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' height='16' width='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E"), auto;
}

<div id="square"></div>

阅读：MDN Using URL values for the cursor property

Answer 2

如果您尝试分配以下内容，也会收到此错误：

height: 250

代替

height: 250px

就像错误提示一样，您应该仔细检查值，看看它是否正是该属性所期望的。

游标的SVG说无效的属性值

2 个答案: