css-sprites 相关问题

我有一个 SVG 精灵：我有一个 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; } 和其他几个类似的选项，但没有快乐。有什么想法吗？ #ailMouseIco:hover{ cursor: url(‘path-to-image.svg’), auto; } 试试这个正如罗伯特·朗森所指出的：您既不能在数据 URI 中使用外部文件，也不能使用内联 <defs> 或 <symbol>s 引用。解决方法：您可以将光标精灵保存在外部 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 加载/渲染。只需将您的 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> 现代浏览器需要更少的转义，你只需要用%23转义所有# 用单引号替换所有" 也不需要旧的xlink符号内联 SO 片段无法正常运行； 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; } <div></div>

css svg css-sprites mouse-cursor svg-sprite

回答 4 投票 0

如何处理CSS sprite（使用背景位置）导致移动设备上图片模糊的问题？

首先，当使用普通图片的CSS时，我们设置width:50px，这在桌面和移动设备上都适用OK（当然图片质量和自然尺寸足够高）。然而当使用...

html css css-sprites

回答 1 投票 -1

CSS Spritesheet动画，顺时针，然后逆时针。

我想在顺时针和逆时针方向连续地给sprite做动画。我可以用两个不同的按钮一次做一个。怎样才能一起完成呢？这是我试过的。Codepen...

sprite css-sprites

回答 1 投票 0

CSS Sprite无法正确加载精灵

我正在尝试为正在构建的菜单加载一张Spritesheet，但不是一次显示一张图像，而是在元素中的不同位置显示整个Spritesheet。这是我的CSS代码...