在 CSSurl()函式的 MDN 頁面上,有一些關于使用 SVG 元素的 ID 作為 URL 的參考。是否可以將頁面中嵌入的 SVG 用作 CSS 游標?
https://developer.mozilla.org/en-US/docs/Web/CSS/url()
該頁面的一些示例:
offset-path: url(#path);
mask-image: url("masks.svg#mask1");
filter: url(#svg-blur); /* the ID of an SVG that is embedded in the HTML page */
但這似乎根本不起作用。有沒有辦法做到這一點?
.mydiv {
width: 200px;
height: 200px;
cursor: url(#svgcursor) 8 8, grab;
}
<div class="mydiv">
</div>
<svg id="svgcursor" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrows-move" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10zM.146 8.354a.5.5 0 0 1 0-.708l2-2a.5.5 0 1 1 .708.708L1.707 7.5H5.5a.5.5 0 0 1 0 1H1.707l1.147 1.146a.5.5 0 0 1-.708.708l-2-2zM10 8a.5.5 0 0 1 .5-.5h3.793l-1.147-1.146a.5.5 0 0 1 .708-.708l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L14.293 8.5H10.5A.5.5 0 0 1 10 8z"/>
</svg>
我正在使用 react-boostrap-icons,因此能夠從 CSS 參考檔案內的圖示并將圖示用作游標,而不是單獨下載 SVG 檔案,這將非常方便。
uj5u.com熱心網友回復:
您不能參考檔案,但可以使用檔案:
.mydiv {
background:pink;
width: 100px;
height: 100px;
cursor: url("data:image/svg xml;charset=UTF-8,") 8 8, grab;
}
<div class="mydiv"></div>
uj5u.com熱心網友回復:
沒有。
對于cursor,url()只能保存影像檔案的位置參考。身份證不起作用。
來自 MDN 檔案
url(…) 或逗號分隔串列 url(…)、url(…)、…,指向影像檔案。可以提供多個 url() 作為后備,以防某些游標影像型別不受支持。非 URL 后備(一個或多個關鍵字值)必須位于后備串列的末尾。
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/441112.html
