"在悬停或活动时更改 svg 颜色"
[英]Change svg color on hover or active
问题描述
I have a button which uses an SVG image.
我有一个使用 SVG 图像的按钮。
How do I get the fill color to work?如何使填充颜色起作用？ Currently it's not working, and is showing the default SVG color which is black.目前它不工作，并显示默认的 SVG 颜色，即黑色。 Note that I can't use jQuery, and prefer to keep it to pure CSS\/HTML if possible.请注意，我不能使用 jQuery，如果可能的话，我更喜欢将其保留为纯 CSS\/HTML。 Is there any way to change the svg fill color with only CSS\/HTML?有没有办法只用 CSS\/HTML 改变 svg 填充颜色？
Note: Below, local SVG file replaced with sample.注意：下面，本地 SVG 文件替换为示例。
.modal-close { width: 30px; height: 30px; border: 0; border-radius: 30px; font-size: 28px; fill: #777; } .modal-close:focus { outline: 0; } .modal-close:hover { fill: #41b97c; } .modal-close:active { background-color: #41b97c; fill: white; }<\/code><\/pre><input type="image" src="\/\/dev.w3.org\/SVG\/tools\/svgweb\/samples\/svg-files\/duck.svg" class="modal-close pull-right" aria-label="Close"><\/code><\/pre>
"2 个解决方案
解决方案1
2 2017-12-12 01:11:10
You can't select the classes of the svg because it is being called as a static image. 您不能选择svg的类，因为它被称为静态图像。 If you copy and paste your svg code directly into your HTML you can then use the classes within it with your css to apply different attributes like any other HTML element. 如果将svg代码直接复制并粘贴到HTML中，则可以将其中的类与CSS一起使用，以像其他任何HTML元素一样应用不同的属性。
解决方案2
0 2022-01-31 19:47:41
<svg class="suchicon" xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 0 24 24" width="30px" fill="#FACC2E"><path d="M0 0h24v24H0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
.suchicon:active {
fill: #585858;
}
.suchicon:hover {
fill: #585858;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.