使用 CSS 更改 SVG spritesheet sprite 的颜色答案

【问题标题】：change color of SVG spritesheet sprite with CSS使用 CSS 更改 SVG spritesheet sprite 的颜色
【发布时间】：2012-11-10 06:11:58
【问题描述】：

我正在为图标使用 SVG spritesheet。我想对 :hover/:active 进行颜色更改。改变 SVG 颜色的唯一方法（我发现）是 SVG 数据是内联的。有一个很好的脚本可以将外部 .svg 转换为内联 SVG 代码：

How to change color of SVG image using CSS (jQuery SVG image replacement)?

但我认为它不适用于 spritesheet，因为页面上的每个 sprite 都将被注入整个 spritesheet 的路径，而不仅仅是特定 sprite 需要显示的 1。

有没有一种方法可以根据类（或其他）提取 spritesheet xml 的特定部分（sprite）以放入 HTML 标记中？我唯一的想法是手动分解spritesheet，将每个sprite path-string放入一个数组/对象中，并使用js（可能是Raphael）编写内联标记并设置悬停颜色；但我不确定这会增加什么样的开销，或者它是否是一种非常复杂的方式来做不应该的事情。

【问题讨论】：

标签： css colors svg

【解决方案1】：

一个想法是使 spritesheet 内联，提供所有不同的 sprite ID 并使用 <svg:use> 引用它们，如下所示：

<html>
  <head>
    <title></title>
    <style type="text/css">
      #firstUseOfSprite1:hover{
        color:green;
      }
      #secondUseOfSprite1:hover{
        color:blue;
      }
      #sprite1{
        fill:currentColor;
        stroke:red;
        stroke-width:5px;
      }
      #defs{
        display:none;
      }</style>
  </head>
  <body>
    <!-- This is our "spritesheet" -->
    <svg id="defs">
      <defs>
        <rect width="50" height="20" id="sprite1"/>
        <circle r="20" id="sprite2"/>
      </defs>
    </svg>
    <p>Here we use the "sprite":</p>
    <div>
      <svg width="55" height="25">
        <use xlink:href="#sprite1" id="firstUseOfSprite1" x="2.5" y="2.5"></use>
      </svg>
    </div>
    <p>And here, we use it again:</p>
    <div>
      <svg width="55" height="25">
        <use xlink:href="#sprite1" id="secondUseOfSprite1" x="2.5" y="2.5"></use>
      </svg>
    </div>
  </body>
</html>

您甚至可以为同一个精灵的不同用途应用不同的悬停效果。它似乎适用于 Firefox 和 Chrome，但悬停效果不适用于我的 Opera。我没试过IE9。

【讨论】：