なかなか知る必要がある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

(Visited 1 times, 1 visits today)