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?
4
Answers
Try this one
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
Css:
HTML usage
Your svg needs to be hosted on same domain – otherwise CORS rules will prevent the svg from loading/rendering.
Just adapt your SVG to url syntax…
Modern browsers need less escaping, you only need to
xlink
notation eitherThe inline SO snippet won’t run it properly;