なかなか知る必要があるSVGのcolor変更

【解決】svgの色が変わらない!CSSorSCSSで変更したいのに!

【解決】svgの色が変わらない!CSSorSCSSで変更したいのに!

なかなか知る必要があるSVGのcolor変更

なかなか知る必要があるSVGのcolor変更

この記事はPCからみてください。。

背景

知り合いの、フロントエンドの、私の師匠である、名前は伏せますが、村上さんが「svgの色変わらない!記事がない!」と騒いでいたので書こうと思いました。「svgの色が変わらない!CSSで変更したい」方のための記事です。ここで解決されているのはsvgファイルの色を外部CSSから変更したい。scss内で同じsvgをdataとして色だけを変えながらCSS出力したい等です。

同じことで悩んでいる方は世界にたくさんいます→ ここ

方法

・maskを使う(background-imageとして読み込み、色を変えたい場合)
・svgの中でstyle属性を定義する
・svgをHTMLElementでラップして参照、変更する
・scssでsvgのfill属性値を変数にして変更する

などです。
あとはJSを使うとかありますが一旦それはしない方向で。。

方法1.maskを使う

background-imageとしてsvgを読み込む場合
これだと効かないので、
mask-imageやmask-sizeで指定します。
もしサポートするブラウザが許すなら

【解決】svgの色が変わらない!CSSorSCSSで変更したいのに!

【解決】svgの色が変わらない!CSSorSCSSで変更したいのに!

現時点(2018/1/27)のサポート状況

方法2.svgファイルの中のstyle属性を変更する

※svgでfill属性が書かれていますが、defsの中のstyleの方が優先されています

方法3.svgファイルのidを参照して外部CSSでfillプロパティを変更する

方法4.svgファイルをhtmlElementを親にしてfillプロパティをキャスケードする

※svg側でheight、width属性がある場合そちらが適応されていることに注意してください なのですが、自分の場合さらに街灯のsvgをscssから参照する際にdateとしてCSS出力する必要がありました。 なぜかというとdataとして出力するとロード時間が短縮、リクエストをしないようになるからです。(spriteは訳あって未使用)

参照
https://github.com/filamentgroup/grunticon/issues/235
https://triple-underscore.github.io/SVG11/shapes.html
https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images

他のフロント記事
フロントエンド記事
JavaScript練習問題
recomposeと仲良くなりたい
機動戦士FlowType
styled-componentsの使い方
初めてReactNativeWebを触ってみて
フロントエンドエンジニア豚汁の作り方
SCSS問題集
Ramda.jsシグネチャの読み方
環境変数の話
sketchでheart作ったから無料ダウンロードしてね

プライベート
サイトTOP
私は何者か
instagram
twitter
github

(Visited 1 times, 1 visits today)