Question

我正在使用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）来编写内联标记并设置悬停颜色;但是我不确定会增加什么样的开销，或者它是否是一种非常复杂的做某种不应该做的事情的方式。

Answer 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。

用CSS改变SVG spritesheet sprite的颜色

1 个答案: