SVG для курсора говорит недопустимое значение свойства

Question

Я хотел бы изменить курсор на SVG, когда курсор находится в пределах #square. Я попытался ниже, свернув SVG и установив значение cursor в CSS, однако я получаю сообщение об ошибке:

Неверное значение свойства

Что я здесь не так делаю? Любая помощь с благодарностью.

#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 Использование значений URL для свойства курсора