使用CSS更改SVG精灵表精灵的颜色
我正在使用SVG spritesheet作为图标。我想在：hover/：active上更改颜色。改变SVG颜色的唯一方法（我发现）是如果SVG数据是内联的。有一个很好的脚本可以将外部.svg转换为内联svg代码： 但是我不认为它可以用于精灵表，因为页面上的每个精灵都会被注入整个精灵表的路径，而不仅仅是特定精灵需要显示的1使用CSS更改SVG精灵表精灵的颜色,css,colors,svg,Css,Colors,Svg,我正在使用SVG spritesheet作为图标。我想在：hover/：active上更改颜色。改变SVG颜色的唯一方法（我发现）是如果SVG数据是内联的。有一个很好的脚本可以将外部.svg转换为内联svg代码： 但是我不认为它可以用于精灵表，因为页面上的每个精灵都会被注入整个精灵表的路径，而不仅仅是特定精灵需要显示的1 是否有一种方法可以基于类（或其他内容）提取精灵表xml的特定部分（精灵）以放入HTML标记中？我唯一的想法是手动分解精灵表，将每个精灵路径字符串放入一个数组/对象中，并使用j
是否有一种方法可以基于类（或其他内容）提取精灵表xml的特定部分（精灵）以放入HTML标记中？我唯一的想法是手动分解精灵表，将每个精灵路径字符串放入一个数组/对象中，并使用js（可能是Raphael）编写内联标记并设置悬停颜色；但我不确定这会增加什么样的开销，或者这是否是一种真正复杂的方式来做一些不应该做的事情。一个想法是将精灵表内联，给出所有不同的精灵ID，并使用
<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>
#Prite1的首次使用：悬停{
颜色：绿色；
}
#Prite1的第二个用途：悬停{
颜色：蓝色；
}
#精灵1{
填充：当前颜色；
笔画：红色；
笔画宽度：5px；
}
#蔑视{
显示：无；
}
这里我们使用“精灵”：
在这里，我们再次使用它：