我想通過jQuery

問題是，我不希望任何外部文件或來源改變光標。我也希望它是一個SVG，所以我認爲這會工作：設置SVG數據作爲光標

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

但它沒有:(

我konw已經有很多關於光標開的線程，但沒有人直接SVG數據

THX提前

PS：？是否可以動態動畫數據

來源

2017-01-16 sanojLeOne

我不知道這是否會工作，但你的jQuery代碼是無效的。您需要將2個參數傳遞給'css'函數。嘗試' 「$（」 HTML 「）。CSS（」光標「」 URL（ ''），自動「）; ' –

這是不是你提供一個網址，你要麼需要指向外部SVG文件或數據URL（其中有一部分是你已經獲得的數據）。請注意，您的數據丟失了SVG命名空間，它將需要是有效的。 –

這是一個很好的問題，有兩種方法來解決這個問題：

1）創建一個Blob url並傳遞svg數據並將url傳遞給屬性值（僅在某些瀏覽器上支持）

2）使用數據url，但有一個catch - 如果不指定維度，則光標將贏得'不會因爲瀏覽器不知道尺寸如何而改變。此外，您還需要添加xmlns標籤或瀏覽器仍然不會顯示。

請注意，我用ES6字符串爲簡潔，但如果你沒有使用transpiler /要支持舊的瀏覽器，然後更改爲字符串連接。

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你也可以使用一個base64字符串，如果你擔心在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}')`; 
}

來源

2017-01-16 15:54:42

一般來說，您只需要編碼＃爲％23，以避免它被解釋爲一個片段標識符。這通常是唯一的無效字符在UTF8數據URL –

THX男人的偉大工程！但什麼是寬度和高度的真正控制，因爲如果我把它設置爲200？，並有可能獲得「生命值」光標是在圈子中間它不工作？順便說一句THX調用這個問題問的好 – sanojLeOne

@sanojLeOne看到我的編輯片段 - SVG具有一定的迷惑性視框你需要調整太（以及圓圈值本身），如果你嘗試在這裏 –

-1

事實上，你可以使用SVG的遊標，但你需要保存SVG作爲自己的文件，並引用它：

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

來源

2017-01-16 15:11:51 Stuart

不，你不這樣做，你可以使用數據鏈接。 –

設置SVG數據作爲光標

我想通過jQuery

回答

相關問題