CSSを使用してカラーオーバーレイでSVGを追加

Question

私はWebアプリケーションで使用しているSVG形式のアイコンのリストを持っています。

アイコンの前景の色が黒で、CSSを使用して、この色を白に変更したいと思います。次のようにどのような（？可能な場合）、この使用してCSSを行うための最も簡単な方法です

HTMLマークアップは次のとおりです。

<img class="icon" src="user.svg"> 

CSS

.icon { 
width: 200px; 
height: auto; 
} 

.icon:hover { 
fill: #fff; /* this doesn't work */ 
} 

JSFiddle

Answer 1

.icon { 
 
width: 200px; 
 
height: auto; 
 
} 
 

 
.icon:hover { 
 
filter: invert(100%); 
 
} 
 

 
.teste { 
 
background-color: lightblue; 
 
}

<div class="teste"> 
 
    <img class="icon" src="https://image.flaticon.com/icons/svg/358/358269.svg"> 
 
</div>

ホバーオン

ちょうどあなたが

HTML

<i class="icon icon-user"></i> 

？：代わりに次のCSSを行うすることが可能になり、あなたの現在のセットアップを考えると

.icon:hover { 
filter: invert(100%); 
} 

Answer 2

を追加

.icon { 
    background-image: url('your/svg/file.svg'); 
    background-repeat: no-repeat; 
} 

.icon-user { 
    background-position: 50px 100px; 
} 

.icon-user:hover { 
    color: red; 
} 

ここでは、<i>タグのbackgroundプロパティを使用して背景イメージを設定し、.svgファイル全体として、background-positionプロパティを使用して、その.svgファイル内の特定の領域を表示するという考えがあります。ホバーで<i>タグの色はcolorプロパティに基づいて指定された色に変更されます。