2

Возник вопрос, есть ли возможность создания из svg элемента кастомный курсор ?

body{
  height: 100%;
  min-height: 100%;
  background-color: #000;

  cursor: url("data:image/svg+xml, %3csvg+xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22+viewBox%3d%220+0+32+32%22%3e%3cpath+d%3d%22M18.2+14.4c-.9.4-1.7.7-2.6+1.1.8+1.4+1.7+2.9+2.5+4.3+1.8-1+4.1-1.9+4-4.3-.1-1.9-2-3.1-3.8-2.2-.6.3-1.7+1.1-2.4+1.2l2.4.6c.1.2.1-2-.1-2.3-.4-1-1.3-1.9-2.4-1.8-3.2.1-4.5+4.1-6.1+6.4+1.5.2+3+.4+4.6.6-.3-1+.4-2.9.4-4+.1-1.3-.1-2.6-.3-3.9-.2-2.8-4.7-2.1-4.7.7+0+2+.5+4.9-.4+6.7-.5+1.1-1.4+1.2-2.2+2.1l2.4-.6c-.1+0-.2+0-.4-.1l1.7+1.7c-.1-.2-.1-.4-.2-.7-.1.6-.2+1.3-.3+1.9.8-1.6+2-3.8.4-5.4l.6+2.4c1-4+1.6-8+1.7-12.1-.2.6-.5+1.2-.7+1.8l1-1H9.8c4.1+3.3+8.1+6.6+12.2+9.9.4-1.4.7-2.8+1.1-4.2-5.1+2-9.9+5.9-15.5+6.5.4+1.7.6+3.3.8+5+1.7-.4+2.3-1.5+2.9-3+1.1-3-3.7-4.3-4.8-1.3.2-.2.4-.3.6-.5-2.7.7-2.2+5.2.7+4.9+6.3-.7+11.1-4.4+16.8-6.7+1.5-.6+2.7-2.9+1.1-4.2-4.1-3.3-8.1-6.6-12.2-9.9-1-.8-2.5-1-3.5+0-1.3+1.3-1.7+2-1.8+3.9-.2+3.3-.7+6.5-1.5+9.7-.2.9+0+1.8.6+2.4l.1.1c-.2-.6-.5-1.2-.7-1.8+0+.5-.6+1.2-.7+1.6-.2.7+0+1.3.2+2+.2.8.9+1.6+1.7+1.7+6.7+1+6.9-8.5+6.9-12.9-1.6.2-3.3.4-4.9.7.4+2.6-1+5.3-.2+7.9.7+2.1+3.3+2.4+4.6.6+1-1.4+1.8-3.3+3-4.6-.6.2-1.2.5-1.8.7h.5l-2.4-1.8c.6+1.7.1+3+1.4+4.5.6.7+1.6.8+2.4.6+1.2-.2+2.5-1.2+3.6-1.7-1.3-.7-2.5-1.4-3.8-2.2v.5c.2-.6.5-1.2.7-1.8-.6.5-1.6.9-2.3+1.3-2.9+1.6-.3+5.5+2.5+4.3.9-.4+1.7-.7+2.6-1.1+3-1.2.4-5.5-2.5-4.2z%22+fill%3d%22%23f00%22%2f%3e%3c%2fsvg%3e")
}

Или я что-то не правильно делаю, или задать не возможно? Ещё вопрос, довеском - почему к тегу body не применяется изменения курсора? Ставил cursor:pointer и он не сработал.

2

1 ответ 1

2

Согласно документации «Использование URL значений для свойства cursor»:

Начиная с Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), Gecko также поддерживает формат SVG в качестве изображения курсора. Тем не менее, SVG изображение должно содержать значения (кроме процентных значений) высоты и ширины на корневом SVG узле. JavaScript, CSS анимация и декларативный SMIL внутри SVG изображения игнорируются; например, вы не можете использовать SVG, чтобы создать анимированный курсор.

При этом это должно быть в отдельном .svg-файле. И вы должны явно объявлять высоту и ширину в вашем .svg-файле. Если вы добавите атрибуты width и height, то должно быть всё в порядке. Просто убедитесь, что вы объявляете размеры не с процентами.

Очевидно, что не все обозреватели сети это поддерживают пока. Так такие обозреватели сети как IE и Opera это не поддерживают пока.

Касательно второго вопроса задайте отдельный вопрос, если нужно.

1
  • На самом деле "отдельный svg фаил" не обязательно использовать. codepen.io/BlackStar1991/pen/RJWqmg Главное условие что б после кастомного курсора шёл курсор по умолчанию (auto, pointer ...) И да, пока что нормально работает только в Хроме 2 июн 2018 в 17:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.