Je veux changer le curseur via jquery

Le problème est que je ne veux pas de fichiers ou de sources externes. Je veux aussi que ce soit un SVG alors j'ai pensé que cela fonctionnerait:

$("html").css("cursor: url('<svg><circle cx="5.7" cy="6.2" r="6"/></svg>'), auto");

Mais ce n'est pas le cas :(

Je sais qu'il y a déjà beaucoup de threads sur le curseur ouvert mais aucun d'entre eux ne contient de données SVG directes.

Thx à l'avance

PS: Est-il possible d'animer ces données dynamiquement?

1
sanojLeOne 16 janv. 2017 à 18:07

2 réponses

Meilleure réponse

C'est une bonne question et il y a deux façons de la résoudre:

1) Créez une URL Blob et transmettez les données svg et transmettez le URL à la valeur de la propriété

2) Utilisez une URL de données, mais il y a un hic - si vous ne spécifiez pas les dimensions, le curseur ne changera pas car le navigateur ne sait pas quelle taille le créer. De plus, vous devez ajouter les balises xmlns sinon le navigateur ne l'affichera toujours pas.

Notez que j'ai utilisé des chaînes ES6 par souci de concaténation, mais si vous n'utilisez pas de transpilateur / souhaitez prendre en charge les anciens navigateurs, passez à la concaténation de chaînes.

function svgUrl(svgString, width, height, viewBoxWidth, viewBoxHeight) {
  viewBoxWidth = viewBoxWidth || width;
  viewBoxHeight = viewBoxHeight || width;
  return `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="${width}" height="${height}" viewBox="0 0 ${viewBoxWidth} ${viewBoxHeight}">${svgString}</svg>')`;
}

$('html').css('cursor', `${svgUrl('<circle cx="100" cy="100" r="100"/>', 100, 100, 200, 200)}, auto`);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

PS, vous pouvez également utiliser une chaîne base64 si vous vous inquiétez des caractères non valides dans les données svg:

function svgToBase64Url(svgString, width, height) {
  const base64SVG = btoa(`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="${width}px" height="${height}px">${svgString}</svg>`);
  return `url('data:image/svg+xml;base64,${base64SVG}')`;
}
4
Dominic 20 oct. 2018 à 12:51

Vous pouvez en effet utiliser SVG pour les curseurs, mais vous devrez enregistrer le SVG dans son propre fichier et le référencer:

cursor: url('/path/to/your/graphic.svg');
-1
Stuart 16 janv. 2017 à 15:11