CSS Cursorzeiger mit SVG-Bild

Ich versuche, einen benutzerdefinierten Cursorzeiger mit einem SVG-Bild anzuwenden, aber es funktioniert nicht, stattdessen, wenn ich ein PNG-Bild verwende, funktioniert alles gut.CSS Cursorzeiger mit SVG-Bild

Hier ist mein Code.

.container { 
    /* not working one */ 
    cursor: url("/images/icon-cross.svg"), auto; 
    /* working one */ 
    cursor: url("/images/icon-cross.png"), auto; 
}

Gibt es einen Trick/Workaround, damit es auch mit SVG funktioniert oder etwas, das nicht unterstützt wird?

Dank

UPDATE

Hier ist der SVG-Code:

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 16.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"> 
<path d="M443.6,387.1L312.4,255.4l131.5-130c5.4-5.4,5.4-14.2,0-19.6l-37.4-37.6c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4 
    L256,197.8L124.9,68.3c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4L68,105.9c-5.4,5.4-5.4,14.2,0,19.6l131.5,130L68.4,387.1 
    c-2.6,2.6-4.1,6.1-4.1,9.8c0,3.7,1.4,7.2,4.1,9.8l37.4,37.6c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1L256,313.1l130.7,131.1 
    c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1l37.4-37.6c2.6-2.6,4.1-6.1,4.1-9.8C447.7,393.2,446.2,389.7,443.6,387.1z"/> 
</svg>

Quelle

2017-08-30 Alessio

, was in der SVG-Datei? Hat das Root-Element Attribute für Höhe und Breite, die keine Prozentsätze sind? –

@RobertLongson Ich habe die Frage mit dem SVG-Code – Alessio

aktualisiert Mögliche Duplikat von [So verwenden Sie eine Svg als den Cursor] (https://stackoverflow.com/questions/37954356/how-to-use-a-svg- wie der Cursor) –

Ihr Bild einfach zu groß ist. Reduziere die width und height auf etwas weniger als 128px.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_User_Interface/Using_URL_values_for_the_cursor_property#Limitations

... die Grenze der Cursorgröße beträgt 128 × 128px. Größere Cursorbilder werden ignoriert.

Beispiel:
https://jsfiddle.net/xhk4zo8y/

Quelle

2017-08-30 17:43:09 Sphinxxx

Danke! Es funktioniert gut! In der Geige habe ich gesehen, wie Sie die SVG in das CSS verschieben, ist es die Base64-Codierung? – Alessio

Es ist eigentlich nicht base64 (obwohl das auch eine Option wäre). Dies ist der XML-Code des SVG mit nur wenigen Zeichen, die so codiert sind, dass sie lesbar sind, während sie immer noch gültig sind. Dieser Artikel erklärt die Technik: https://codepen.io/tigt/post/optimizing-svgs-in-data-uris – Sphinxxx

CSS Cursorzeiger mit SVG-Bild

Antwort

Verwandte Themen