csssvgcss-spritesmouse-cursorsvg-sprite

Use SVG sprite as mouse cursor


I have an SVG sprite:

      <svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
        <symbol id="ailMouseIco" viewBox="0 0 51.2 76.5">
          <path fill="#FFF" stroke="#000" stroke-width="3" d="M47.5 48.6l-46-45v62l14-13 10 22 10-4-10-22h22z"/>
        </symbol>
      </svg>

Elsewhere, I use that sprite as follows:

          <svg width="30" height="30">
            <use xlink:href="#ailMouseIco"></use>
          </svg>

I need to use this sprite as a mouse cursor (CSS).

I've tried:

html *, html:hover {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cuse xlink:href='%23ailMouseIco'%3E%3C/use%3E%3C/svg%3E"),default !important;
}

and

html *, html:hover {
    cursor: url("#ailMouseIco"),default !important;
}

and several other, similar options, but no joy.

Any ideas?


Solution

  • As pointed out by Robert Longson:
    you can neither use external file nor inlined <defs> or <symbol>s references in a data URI.

    Workaround: You can save your cursor sprite in an external svg file.

    But you also need to add a visible/rendered <use> element referencing the cursor <symbol>.
    Otherwise the cursor won't show up:

    External svg file: cursor.svg

    <svg xmlns="http://www.w3.org/2000/svg" width='32' height='32' viewBox="0 0 51.2 76.5">
      <symbol id="ailMouseIco" viewBox="0 0 51.2 76.5">
        <path fill="#FFF" stroke="#000" stroke-width="3" d="M47.5 48.6l-46-45v62l14-13 10 22 10-4-10-22h22z" />
      </symbol>
      <!-- cursor icon needs rendered use istance-->
      <use id="useCursor" href="#ailMouseIco" />
    </svg>
    

    Css:

    html,
    body {
        height: 100%;
        width: 100%;
        background: #eee;
        cursor: url("cursor.svg") 16 16, default;
    }
    

    HTML usage

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.2 76.5" width="30" height="30">
        <use href="cursor.svg#ailMouseIco"></use>
    </svg>
    

    Your svg needs to be hosted on same domain - otherwise CORS rules will prevent the svg from loading/rendering.