光标的 SVG 表示无效的属性值答案

【问题标题】：SVG for cursor says invalid property value光标的 SVG 表示无效的属性值
【发布时间】：2020-08-17 03:55:37
【问题描述】：

当光标在#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");
}

&lt;div id="square"&gt;&lt;/div&gt;

【问题讨论】：

css cursor using data-uri的可能重复

标签： css svg

【解决方案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;
}

&lt;div id="square"&gt;&lt;/div&gt;

阅读：MDN Using URL values for the cursor property

【讨论】：

下次，您可以通过单击问题的 sn-p 中的“复制 sn-p 以回答”来改进您的答案，然后使用您的修复程序编辑该 sn-p。

【解决方案2】：

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

height: 250

而不是

height: 250px

正如错误所说，您应该仔细检查 value 并查看它是否是该属性所期望的那种东西。

【讨论】：