我正在使用 svg 将 stack overflow 的 Logo 嵌入到我的简历中。 svg xml 包含 Logo 的填充颜色。
这是svg内容
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 64 64" id="svg3715">
<defs id="defs3717"/>
<g id="layer1">
<path d="m 9.3049611,36.847632 4.4013079,0.04316 -0.153442,19.598393 29.291259,0 0,-19.527506 4.637782,0 0,24.287331 -38.2006795,0 0.023777,-24.401371 z" id="path2830" fill="#919191" style="fill-opacity:1;stroke:none"/>
<rect width="22.944817" height="4.881876" x="16.481951" y="48.434078" id="rect3604" fill="#919191" style="fill-opacity:1;stroke:none"/>
<rect width="23.066864" height="5.0039229" x="20.749949" y="37.830307" transform="matrix(0.9953749,0.09606666,-0.09606666,0.9953749,0,0)" id="rect3606" fill="#A78B68" style="fill-opacity:1;stroke:none"/>
<rect width="23.066864" height="5.0039229" x="26.472515" y="23.401554" transform="matrix(0.96240291,0.27162592,-0.27162592,0.96240291,0,0)" id="rect3606-1" fill="#c19653" style="fill-opacity:1;stroke:none"/>
<rect width="23.066864" height="5.0039229" x="30.528769" y="3.1535864" transform="matrix(0.85597805,0.51701216,-0.51701216,0.85597805,0,0)" id="rect3606-1-3" fill="#D48C28" style="fill-opacity:1;stroke:none"/>
<rect width="23.066864" height="5.0039229" x="27.191883" y="-24.475019" transform="matrix(0.58242689,0.81288309,-0.81288309,0.58242689,0,0)" id="rect3606-1-3-7" fill="#FE8908" style="fill-opacity:1;stroke:none"/>
<rect width="23.066864" height="5.0039229" x="11.174569" y="-50.183693" transform="matrix(0.16480989,0.98632535,-0.98632535,0.16480989,0,0)" id="rect3606-1-3-7-6" fill="#FF7A15" style="fill-opacity:1;stroke:none"/>
</g>
</svg>
我可以将 Logo 设置为黑色(我希望它在正常状态下的样子)使用
rect, path
{
fill: black;
}
但是现在,我该怎么做才能删除 :hover
上的属性,以使 Logo 恢复亮度?
我试图查看 fill
参数 documentation 。但我发现没有任何帮助。
最佳答案
这是可能的 - 只需使用 :not()
CSS 中的选择器。不过有些浏览器可能不支持它:
svg:not(:hover) rect,
svg:not(:hover) path {
fill: black;
}
在这里查看 fiddle - http://jsfiddle.net/teddyrised/qvV8Q/
[编辑]:为了完整起见——你是否应该为不支持 :not()
的浏览器添加兼容性?选择器,您只需切换 .hover
类和样式相应:
$(document).ready(function() {
$("svg").hover(function() {
$(this).attr("class", "hover");
}, function() {
$(this).attr("class", "");
});
});
注意:.attr()
的原因使用是因为 add/removeClass 方法不适用于 <svg>
原生元素。然而,这可以通过使用这个插件来补救 - http://keith-wood.name/svg.html#dom
还有 CSS:
.hover rect, .hover path {
fill: black;
}
可以在此处查看 JS 驱动的替代方案 - http://jsfiddle.net/teddyrised/LTRCB/
关于html - 重置 :hover 上的 css 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16003887/