css - 如何在悬停时更改 svg 颜色
问题描述
每个人,我都在使用角度,我有一个 svg , html 像:
<button
type="button"
class="filter-icon-wrapper padding-0 border-0 outline-0 bg-transparent pointer"
>
<mat-icon class="filter-icon" *ngIf="!isDateType" svgIcon="filter_default">filter_alt</mat-icon>
</button>
这是 svg 源代码 filter_default:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11.9 11.91"><defs><style>.cls-2{fill:#707070;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="Path_7587" data-name="Path 7587"><path class="cls-2" d="M6.8,11.91a1,1,0,0,1-.58-.19l-1.7-1.19a1,1,0,0,1-.43-.83V5.52L.3,1.73A1,1,0,0,1,0,1,1,1,0,0,1,.29.3,1,1,0,0,1,1,0h9.88a1,1,0,0,1,.72.29,1,1,0,0,1,0,1.44L7.82,5.52v5.37a1,1,0,0,1-.19.59A1,1,0,0,1,6.8,11.91ZM1,1,5.09,5.11V9.7L6.8,10.9l0-5.79L10.9,1V1Z"/></g></g></g></svg>
我想知道鼠标悬停时如何改变svg颜色,谢谢大家的帮助!</p>
解决方案
#Path_7587 .cls-2 {
fill:#707070;
}
#Path_7587 .cls-2:hover {
fill: red;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11.9 11.91"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="Path_7587" data-name="Path 7587"><path class="cls-2" d="M6.8,11.91a1,1,0,0,1-.58-.19l-1.7-1.19a1,1,0,0,1-.43-.83V5.52L.3,1.73A1,1,0,0,1,0,1,1,1,0,0,1,.29.3,1,1,0,0,1,1,0h9.88a1,1,0,0,1,.72.29,1,1,0,0,1,0,1.44L7.82,5.52v5.37a1,1,0,0,1-.19.59A1,1,0,0,1,6.8,11.91ZM1,1,5.09,5.11V9.7L6.8,10.9l0-5.79L10.9,1V1Z"/></g></g></g></svg>
推荐阅读
- nginx - 获取存储在 Heroku 上的证书和密钥文件名以在 Nginx 服务器上设置 SSL
- python-3.x - 在 Pandas 中将一系列列表扩展为 DataFrame
- javascript - 如何使用另一个下拉列表 asp.net core 3.0 过滤下拉列表的选项
- django - 如何在 Django 中查询以过滤数据库表中的数据?
- android - Android Studio 中没有按钮反馈
- unit-testing - bloc handleError 不会在 dart 中捕获错误
- javascript - 如何从 url 中删除或隐藏 /#file_name
- html - SyntaxError:我的简单节点应用程序中 JSON 输入意外结束..无法获取数据
- python - 我在 BattleShips 游戏 python 中找不到无限循环
- json - 如何使用 luvit 读取 url 的 json