使用SVG精灵作为鼠标光标

huangapple go评论60阅读模式
英文:

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:

      &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; style=&quot;display:none;&quot;&gt;
        &lt;symbol id=&quot;ailMouseIco&quot; viewBox=&quot;0 0 51.2 76.5&quot;&gt;
          &lt;path fill=&quot;#FFF&quot; stroke=&quot;#000&quot; stroke-width=&quot;3&quot; d=&quot;M47.5 48.6l-46-45v62l14-13 10 22 10-4-10-22h22z&quot;/&gt;
        &lt;/symbol&gt;
      &lt;/svg&gt;

Elsewhere, I use that sprite as follows:

          &lt;svg width=&quot;30&quot; height=&quot;30&quot;&gt;
            &lt;use xlink:href=&quot;#ailMouseIco&quot;&gt;&lt;/use&gt;
          &lt;/svg&gt;

I need to use this sprite as a mouse cursor (CSS).

I've tried:

html *, html:hover {
    cursor: url(&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; width=&#39;30&#39; height=&#39;30&#39;%3E%3Cuse xlink:href=&#39;%23ailMouseIco&#39;%3E%3C/use%3E%3C/svg%3E&quot;),default !important;
}

and

html *, html:hover {
    cursor: url(&quot;#ailMouseIco&quot;),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 &lt;defs&gt; or &lt;symbol&gt;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 &lt;use&gt; element referencing the cursor &lt;symbol&gt;.
Otherwise the cursor won't show up:

External svg file: cursor.svg

&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&#39;32&#39; height=&#39;32&#39; viewBox=&quot;0 0 51.2 76.5&quot;&gt;
  &lt;symbol id=&quot;ailMouseIco&quot; viewBox=&quot;0 0 51.2 76.5&quot;&gt;
    &lt;path fill=&quot;#FFF&quot; stroke=&quot;#000&quot; stroke-width=&quot;3&quot; d=&quot;M47.5 48.6l-46-45v62l14-13 10 22 10-4-10-22h22z&quot; /&gt;
  &lt;/symbol&gt;
  &lt;!-- cursor icon needs rendered use istance--&gt;
  &lt;use id=&quot;useCursor&quot; href=&quot;#ailMouseIco&quot; /&gt;
&lt;/svg&gt;

Css:

html,
body {
    height: 100%;
    width: 100%;
    background: #eee;
    cursor: url(&quot;cursor.svg&quot;) 16 16, default;
}

HTML usage

&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 51.2 76.5&quot; width=&quot;30&quot; height=&quot;30&quot;&gt;
    &lt;use href=&quot;cursor.svg#ailMouseIco&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;

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(&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; xmlns:xlink=&#39;http://www.w3.org/1999/xlink&#39; x=&#39;0px&#39; y=&#39;0px&#39; width=&#39;52px&#39; height=&#39;76px&#39; viewbox=&#39;0 0 51.2 76.5&#39;%3E%3Cpath fill=&#39;%23FFF&#39; stroke=&#39;%23000&#39; stroke-width=&#39;3&#39; d=&#39;M47.5 48.6l-46-45v62l14-13 10 22 10-4-10-22h22z&#39;/%3E%3C/svg%3E&quot;) 3 3, pointer;
}

<!-- language: lang-html -->

&lt;div&gt;&lt;/div&gt;

<!-- 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 xlink notation 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(&quot;data:image/svg+xml,&lt;svg xmlns=&#39;http://www.w3.org/2000/svg&#39; x=&#39;0px&#39; y=&#39;0px&#39; width=&#39;52px&#39; height=&#39;76px&#39; viewbox=&#39;0 0 51.2 76.5&#39; style=&#39;background:red&#39;&gt;&lt;path fill=&#39;%23FFF&#39; stroke=&#39;%23000&#39; stroke-width=&#39;3&#39; d=&#39;M47.5 48.6l-46-45v62l14-13 10 22 10-4-10-22h22z&#39;/&gt;&lt;/svg&gt;&quot;) 3 3, pointer;
}

<!-- language: lang-html -->

&lt;div&gt;&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年3月7日 21:22:58
  • 转载请务必保留本文链接:https://go.coder-hub.com/75662535.html
  • css
  • css-sprites
  • mouse-cursor
  • svg
  • svg-sprite
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定