Html CSS - 在悬停时更改填充颜色 - SVG PATH
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19157122/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS - Change Fill Color on Hover - SVG PATH
提问by user2232273
im using the modern ui icons pack in my project using the svg path.
我使用 svg 路径在我的项目中使用现代 ui 图标包。
what i try to do is to change the fill color on hover .
我尝试做的是更改悬停时的填充颜色。
but i have no success..
但我没有成功..
hope someone help me out with this .
希望有人帮我解决这个问题。
Thanks in advance.
提前致谢。
Code:
代码：
<div id="Main">
<ul>
<li>
<form>
<button>
<div class="inner">
<svg>
<path d="M35.......etc..">
</path>
</svg>
</div>
</button>
</form>
</li>
</ul>
</div
回答by Rajnikant Kakadiya
You can overwrite svg css property as per below.
您可以按照以下方式覆盖 svg css 属性。
#Main svg:hover {
fill: #fce57e;
}
回答by Anderson Koh
Sorry for answering a very very old post.
很抱歉回答了一个非常非常老的帖子。
I think the best way is to see what tag was wrapped inside your <svg>.
我认为最好的方法是查看您的<svg>.
So for example:
例如：
<svg>
<path>...</path>
</svg>
As you can see the <path>tag is wrapped by the <svg>. Then you can just add <path>with this way in css:
如您所见，<path>标签由<svg>. 然后你可以<path>在css中用这种方式添加：
svg:hover path {
fill: #fce57e;
}
Here is the working snippet:
这是工作片段：
svg:hover path {
fill: black;
transition: all ease 0.3s;
}
svg path {
transition: all ease 0.3s;
}<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33.19 50.36" width="15%" class="go-location-all" id="go-location-icon"><defs><style>.cls-1{fill:#DF1E34;}</style></defs><title>find-location</title><g id="Layer_2" data-name="Layer 2"><g id="artwork"><path class="cls-1" d="M20.75,22.56a1.09,1.09,0,1,0-1-1.93,6.71,6.71,0,1,1,3.56-5.92,1.1,1.1,0,0,0,2.19,0,8.88,8.88,0,1,0-4.73,7.85Z"/><path class="cls-1" d="M15.88,44.28a1.07,1.07,0,0,0,.71.27,1.09,1.09,0,0,0,.67-.23,37.31,37.31,0,0,0,7-7.8,38.45,38.45,0,0,0,7-21.82,14.71,14.71,0,1,0-29.41,0c0,9,3.8,16.58,7,21.33A44.52,44.52,0,0,0,15.88,44.28Zm.71-42.09A12.53,12.53,0,0,1,29.11,14.71a36.16,36.16,0,0,1-6.57,20.5A38.39,38.39,0,0,1,16.63,42a46.29,46.29,0,0,1-6-7.22c-3-4.49-6.58-11.62-6.58-20.06A12.52,12.52,0,0,1,16.59,2.19Z"/><path class="cls-1" d="M24.51,40.69a1.1,1.1,0,0,0-.32,2.17C29.59,43.67,31,45,31,45.25s-.79,1-3.94,1.83a45.38,45.38,0,0,1-10.47,1.09A45.29,45.29,0,0,1,6.13,47.08C3,46.3,2.22,45.44,2.19,45.25S3.59,43.67,9,42.86a1.09,1.09,0,0,0-.32-2.16C4.7,41.29,0,42.57,0,45.25c0,1.66,1.8,3,5.36,3.9a46.84,46.84,0,0,0,11.23,1.21,47,47,0,0,0,11.24-1.21c3.55-.92,5.36-2.24,5.36-3.9C33.19,42.56,28.47,41.29,24.51,40.69Z"/></g></g></svg>回答by JerryGoyal
In some cases strokeis used instead of fillfor svg, so use this
在某些情况下stroke用于代替fillsvg，所以使用这个
svg:hover path {
stroke: #fce57e;
}
or if there's no path involved:
或者如果不涉及路径：
svg:hover {
stroke: #fce57e;
}
