SVGデータをカーソルとして設定

Question

jqueryを使用してカーソルを変更したい

問題は、外部ファイルやソースを必要としないことです。 私もそう、私はこれが働くだろうと思ったことはSVGになりたい：

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

が、それは私がカーソルに関するスレッドがたくさん開いたが、直接と、それらのどれも既に存在しているkonw :(

をdidntの。SVGデータ事前に

Thxを

PS：それは動的にそのデータをアニメーション化することは可能です

Answer 1

これは良い質問ですし、それを解決するには、2つの方法があります：

1）Blobを作成しますURLを使用してsvgデータを渡し、プロパティ値にURLを渡します（いくつかのブラウザでのみサポートされます）

2）データURLを使用しますが、キャッチがあります。寸法を指定しないと、ブラウザーがそれを作るためのどのサイズを知らないので変更しないでください。さらにxmlnsタグを追加する必要があります。そうしないと、ブラウザで表示されません。

簡潔にするためにES6文字列を使用していますが、トランスペラレータを使用していない場合、古いブラウザをサポートしたい場合は文字列連結に変更してください。あなたはSVGデータに無効な文字心配している場合は、また、base64文字列を使用することができ

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：

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}')`; 
} 

Answer 2

あなたは確かにするためにSVGを使用することができますか？カーソルが、あなたは、独自のファイルとしてSVGを保存する必要があり、それを参照されます：

cursor: url('/path/to/your/graphic.svg');