0
SVG iconに色を付ける
2022-05-25

ページ中に表示したSVNのアイコンに対して、色をつけたいというケースがあった

とりあえずcolorプロパティを変更しても反映されなかったため、調べたら

filterプロパティというものがありそれを適切に設定すると色を付けることが可能だった

<img src="hoge.svg" class="red">
.red {
  filter: invert(13%) sepia(94%) saturate(7466%) hue-rotate(0deg) brightness(94%) contrast(115%);
}

個々で指定している数値はRGBから変換できるとうれしいなと思っていたら

下記のようなページで変換するのが良さそう

CSS Color Filter Generator

0

Profile

swfz
swfz
日々学んだことを残していく
Today I Learned
コード片置き場

Account

RSS

Powered by Pixela
© 2024. swfz