英文:
Use SVG sprite as mouse cursor
问题
我有一个SVG精灵：
<svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
<symbol id="ailMouseIco" viewBox="0 0 51.2 76.5">
<path fill="#FFF" stroke="#000" stroke-width="3" d="M47.5 48.6l-46-45v62l14-13 10 22 10-4-10-22h22z"/>
</symbol>
</svg>
在其他地方，我像下面这样使用该精灵：
<svg width="30" height="30">
<use xlink:href="#ailMouseIco"></use>
</svg>
我需要将这个精灵用作鼠标指针（CSS）。
我尝试过：
html *, html:hover {
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cuse xlink:href='%23ailMouseIco'%3E%3C/use%3E%3C/svg%3E"), default !important;
}
和
html *, html:hover {
cursor: url("#ailMouseIco"), default !important;
}
以及其他类似的选项，但都没有成功。
有什么建议吗？
英文:
I have an SVG sprite:
<svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
<symbol id="ailMouseIco" viewBox="0 0 51.2 76.5">
<path fill="#FFF" stroke="#000" stroke-width="3" d="M47.5 48.6l-46-45v62l14-13 10 22 10-4-10-22h22z"/>
</symbol>
</svg>
Elsewhere, I use that sprite as follows:
<svg width="30" height="30">
<use xlink:href="#ailMouseIco"></use>
</svg>
I need to use this sprite as a mouse cursor (CSS).
I've tried:
html *, html:hover {
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cuse xlink:href='%23ailMouseIco'%3E%3C/use%3E%3C/svg%3E"),default !important;
}
and
html *, html:hover {
cursor: url("#ailMouseIco"),default !important;
}
and several other, similar options, but no joy.
Any ideas?
答案1
得分: 0
#ailMouseIco:hover{
cursor: url('路径到图像.svg'), auto;
}
Try this one
英文:
#ailMouseIco:hover{
cursor: url(‘path-to-image.svg’), auto;
}
Try this one
答案2
得分: 0
如Robert Longson指出：
在数据URI中，既不能使用外部文件，也不能使用内联的<defs>或<symbol>的引用。
解决方法：您可以将光标精灵保存在外部的SVG文件中。
但您还需要添加一个可见/渲染的<use>元素来引用光标的<symbol>，否则光标将不会显示出来：
外部SVG文件：cursor.svg
<svg xmlns="http://www.w3.org/2000/svg" width='32' height='32' viewBox="0 0 51.2 76.5">
<symbol id="ailMouseIco" viewBox="0 0 51.2 76.5">
<path fill="#FFF" stroke="#000" stroke-width="3" d="M47.5 48.6l-46-45v62l14-13 10 22 10-4-10-22h22z" />
</symbol>
<!-- 光标图标需要渲染的使用实例 -->
<use id="useCursor" href="#ailMouseIco" />
</svg>
CSS:
html,
body {
height: 100%;
width: 100%;
background: #eee;
cursor: url("cursor.svg") 16 16, default;
}
HTML用法
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.2 76.5" width="30" height="30">
<use href="cursor.svg#ailMouseIco"></use>
</svg>
您的SVG文件需要托管在相同的域上 - 否则，CORS规则将阻止SVG加载/渲染。
英文:
As pointed out by Robert Longson:
you can neither use external file nor inlined <defs> or <symbol>s references in a data URI.
Workaround: You can save your cursor sprite in an external svg file.
But you also need to add a visible/rendered <use> element referencing the cursor <symbol>.
Otherwise the cursor won't show up:
External svg file: cursor.svg
<svg xmlns="http://www.w3.org/2000/svg" width='32' height='32' viewBox="0 0 51.2 76.5">
<symbol id="ailMouseIco" viewBox="0 0 51.2 76.5">
<path fill="#FFF" stroke="#000" stroke-width="3" d="M47.5 48.6l-46-45v62l14-13 10 22 10-4-10-22h22z" />
</symbol>
<!-- cursor icon needs rendered use istance-->
<use id="useCursor" href="#ailMouseIco" />
</svg>
Css:
html,
body {
height: 100%;
width: 100%;
background: #eee;
cursor: url("cursor.svg") 16 16, default;
}
HTML usage
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.2 76.5" width="30" height="30">
<use href="cursor.svg#ailMouseIco"></use>
</svg>
Your svg needs to be hosted on same domain - otherwise CORS rules will prevent the svg from loading/rendering.
答案3
得分: 0
只需将你的SVG适应URL语法...
<div>
margin : 1em;
width : 20em;
height : 10em;
background : lightgreen;
cursor : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='52px' height='76px' viewbox='0 0 51.2 76.5'%3E%3Cpath fill='%23FFF' stroke='%23000' stroke-width='3' d='M47.5 48.6l-46-45v62l14-13 10 22 10-4-10-22h22z'/%3E%3C/svg%3E") 3 3, pointer;
</div>
<div></div>
英文:
Just adapt your SVG to url syntax...
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
div {
margin : 1em;
width : 20em;
height : 10em;
background : lightgreen;
cursor : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='52px' height='76px' viewbox='0 0 51.2 76.5'%3E%3Cpath fill='%23FFF' stroke='%23000' stroke-width='3' d='M47.5 48.6l-46-45v62l14-13 10 22 10-4-10-22h22z'/%3E%3C/svg%3E") 3 3, pointer;
}
<!-- language: lang-html -->
<div></div>
<!-- end snippet -->
答案4
得分: 0
现代浏览器需要较少的转义，您只需要：
- 用 %23 替换所有的 #
- 用单引号替换所有的 "
- 不再需要旧的
xlink符号
内联 SO 代码片段无法正确运行；
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
div {
margin : 1em;
width : 20em;
height : 10em;
background : lightgreen;
cursor : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='52px' height='76px' viewbox='0 0 51.2 76.5' style='background:red'><path fill='%23FFF' stroke='%23000' stroke-width='3' d='M47.5 48.6l-46-45v62l14-13 10 22 10-4-10-22h22z'/></svg>") 3 3, pointer;
}
<!-- language: lang-html -->
<div></div>
<!-- end snippet -->
英文:
Modern browsers need less escaping, you only need to
- escape all # with %23
- replace all " with a single-quote
- no need for old
xlinknotation either
The inline SO snippet won't run it properly;
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
div {
margin : 1em;
width : 20em;
height : 10em;
background : lightgreen;
cursor : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='52px' height='76px' viewbox='0 0 51.2 76.5' style='background:red'><path fill='%23FFF' stroke='%23000' stroke-width='3' d='M47.5 48.6l-46-45v62l14-13 10 22 10-4-10-22h22z'/></svg>") 3 3, pointer;
}
<!-- language: lang-html -->
<div></div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论