Как использовать SVG в качестве курсора мыши в JS или CSS?

Question

У меня проблемы при попытке сделать SVG курсором при наведении курсора на изображение. Вот пример:

<div class="main">
 <div class="image1"></div>
 <div class="image2"></div>
 <div class="image3"></div>
<svg class="arrowWrapper" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 270.7 166.49" xml:space="preserve"><g><defs><rect id="SVGID_1_" width="270.7" height="166.49"/></defs><clipPath id="SVGID_2_"><use xlink:href="#SVGID_1_"  style="overflow:visible;"/></clipPath><path style="clip-path:url(#SVGID_2_);fill:none;stroke:#000000;stroke-width:3.401;stroke-miterlimit:10;" d="M1.2,83.67 L83.67,1.2 M1.2,82.82l82.46,82.47 M270.7,82.82H2.05"/></g>
</svg>
</div>

Поэтому, когда я наведу указатель мыши на изображение, я бы хотел, чтобы стрелка svg появлялась и следовала за указателем мыши (или просто заменяла указатель мыши) до Я оставляю изображение.

Answer 1

Вы можете добавить курсор при наведении курсора, как показано ниже на каждом из изображений, и я почти уверен, что рекомендуемый формат изображения, который вы хотите добавить, - это png, потому что у меня была та же проблема для моего сайта, и я не мог добавить SVG как курсор

.image1 .image2 .image3:hover{
    cursor: url('image path to your cursor'), auto ;
}

<div class="main">
 <div class="image1"></div>
 <div class="image2"></div>
 <div class="image3"></div>
</div>