使用图像 URL 作为 DOM 样式光标属性

Question

我正在尝试在我的 React 应用程序中的某些条件下使用自定义光标图标。
假设以下内容按预期工作：

this.element.style.cursor = 'crosshair'

如何使用 .svg 图像而不是原生光标值之一？

无效的语法：

this.element.style.cursor = '../relative/path/icon.svg'

this.element.style.cursor = ['../relative/path/icon.svg']

this.element.style.addProperty('cursor', '../relative/path/icon.svg', 'auto')

这可能是一个简单的路径或语法问题，但非常感谢任何见解。

Answer 1

字符串的语法需要url()格式：

this.element.style.cursor = 'url(../relative/path/icon.svg), pointer';

在 React 中，您可能需要一个模板文字来评估路径：

this.element.style.cursor = `url(${myURLVarialble}), pointer`;

您还可以在 CSS class 中定义自定义光标并将 class 应用于元素。

Using an image URL for the DOM style cursor property