用CSS改变SVG spritesheet sprite的颜色 [英] change color of SVG spritesheet sprite with CSS
问题描述
我使用的SVG spritesheet图标。我想做一个颜色变化：hover /：active。唯一的方法（我发现）更改SVG的颜色是如果SVG数据是内联的。有一个很好的脚本将外部.svg转换为内联SVG代码：
I'm using a SVG spritesheet for icons. I'd like to do a color-change on :hover/:active. The only way (I've found) to change an SVG's color is if the SVG data is inline. There's a nice script to convert an external .svg into inline SVG code:
How to change color of SVG image using CSS (jQuery SVG image replacement)
但我不认为它会与spritesheet一起工作，因为页面上的每个sprite将被注入整个spritesheet的路径，而不是只有特定sprite需要显示的1。
but I don't think it will work with a spritesheet, because every sprite on the page would be injected with the paths for the entire spritesheet, rather than just the 1 that particular sprite needs to display.
有一种方法可以提取spritesheet的xml的特定部分（sprite）放入HTML标记，基于类（或其他）？我唯一的想法是手动分解spritesheet，把每个sprite路径字符串放入一个数组/对象，并使用js（也许Raphael）写入内联标记和设置悬停颜色;但我不知道什么样的开销会增加，或者如果它是一个非常复杂的方式做不应该的东西。
Is there a way to extract a specific part (sprite) of the spritesheet's xml to put into the HTML markup, based on a class (or something else)? My only thought is to manually break up the spritesheet, put each sprite path-string into an array/object, and use js (maybe Raphael) to write the inline markup and set up the hover colors; but I'm not sure what kind of overhead that would add, or if it's a really convoluted way of doing something that shouldn't be.
推荐答案
一个想法是使spritesheet内联，给出所有不同的sprite ID，并使用< svg：use> 引用它们， p>
One idea would be to make the spritesheet inline, give all the different sprites IDs and reference them using <svg:use>, like so:
<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>
您甚至可以为同一个sprite的不同用途应用不同的悬停效果。它似乎工作正常与Firefox和Chrome，但悬停效果不适用于我的Opera。我没有尝试IE9。
You can even apply different hover effects for different uses of the same sprite. It seems to work fine with Firefox and Chrome, but the hover effect doesn't work with Opera for me. I didn't try IE9.
这篇关于用CSS改变SVG spritesheet sprite的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
