时间戳

首页 > 解决方案 > 为 DOM 样式光标属性使用图像 URL

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

问题描述

我试图在我的 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')

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

标签： htmlcssreactjssvgcursor

解决方案

字符串的语法需要采用以下url()格式：

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

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

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

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

推荐阅读