title: How use an svg as a mouse cursor in JS or CSS?
body: <p>I'm having troubles while trying to make a svg being the cursor while hovering an image.
  Here's the example:</p>
  
  <pre><code>&lt;div class="main"&gt;
   &lt;div class="image1"&gt;&lt;/div&gt;
   &lt;div class="image2"&gt;&lt;/div&gt;
   &lt;div class="image3"&gt;&lt;/div&gt;
  &lt;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"&gt;&lt;g&gt;&lt;defs&gt;&lt;rect id="SVGID_1_" width="270.7" height="166.49"/&gt;&lt;/defs&gt;&lt;clipPath id="SVGID_2_"&gt;&lt;use xlink:href="#SVGID_1_"  style="overflow:visible;"/&gt;&lt;/clipPath&gt;&lt;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"/&gt;&lt;/g&gt;
  &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So when I hover the mouse-pointer over an image, I'd like the svg arrow to appear and follow the mouse-pointer (or just replace the mouse-pointer) until I leave the image.</p>