[英]How to change svg color on Hover
每一個,我都在使用 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>
我想知道如何更改鼠標hover時的svg顏色,謝謝大家的幫助!
#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>
類似於第一個答案,有一個更正。 正確的 class 修改為cls-2 :
.cls-2:hover {
fill:red;
}
感謝您的所有幫助,我嘗試了 ng-deep,現在工作正常
將 svg 中的 class 名稱從 cls-2 重命名為 floatTextIcon
在 scss 文件中添加這樣的代碼
:host::ng-deep.floatTextIcon:hover { 填充:#3a464d; }
懸停按鈕時更改圖標顏色:
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.