3

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

如何使用 CSS（jQuery SVG 图像替换）更改 SVG 图像的颜色？

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

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

4

1 回答 1

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。

于 2012-11-22T00:10:31.440 回答