如何在悬停上更改svg颜色

Question

每一个，我都使用angular，我有一个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的颜色，谢谢你的帮助

Answer 1

#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>

Answer 2

类似于第一个答案，只做了一次更正。要修改的正确类是cls-2:

.cls-2:hover {
fill:red;
}

Answer 3

感谢您的帮助，我尝试了ng deep，现在工作得很好

1. 将svg中的类名从cls-2重命名为floatTextIcon

2. 在scss文件中添加这样的代码

   ：host:：ng depth。floatTextIcon:悬停{填充：#3a464d；}

Answer 4

悬停按钮时更改图标颜色：

button .cls-2 {
fill: #888;
}
button:hover .cls-2 {
fill: blue;
}

button {
width: 50px;
height: 50px;
}
button .cls-2 {
fill: #888;
}
button:hover .cls-2 {
fill: blue;
}

<button>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11.9 11.91"><g id="Layer_2" data-name="Layer 2" width="32" height="32"><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>
</button>