☰

img src SVG CSSでスタイルを変更する 質問する

tag-icon • tag-icon css image svg
img src SVG CSSでスタイルを変更する 質問する

html

<img src="logo.svg" alt="Logo" class="logo-img">

css

.logo-img path {
  fill: #000;
}

上記の SVG は読み込まれ、ネイティブですfill: #fffが、上記を使用してcss黒に変更しようとしても変更されません。SVG を扱うのは初めてで、なぜ機能しないのかわかりません。

ベストアンサー1

SVG をマスクとして設定することができます。その場合、背景色を設定すると、塗りつぶしの色として機能します。

html

<div class="logo"></div>

CS

.logo {
  background-color: red;
  -webkit-mask: url(logo.svg) no-repeat center;
  mask: url(logo.svg) no-repeat center;
}

JSFiddle: https://jsfiddle.net/KuhlTime/2j8exgcb/
出典: https://developer.mozilla.org/en-US/docs/Web/CSS/マスク

ブラウザがこの機能をサポートしているかどうかを確認してください:https://caniuse.com/#search=マスク

おすすめ記事