将图像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类中定义自定义光标，并将该类应用于元素。