Edited at

SVG 画像を CSS で文字色と同じ色に塗る

More than 1 year has passed since last update.


なにをやったか

ウェブページに SVG 画像を置くとき、 CSS で色を制御したくなることがあると思います。

SVG 専用のプロパティ fill を使って塗る記事はたくさんでてくるのですが、


  • CSS animation, transition に対応していない(ブラウザによる?)

  • テキストの一部として SVG アイコンを使う場合に、不便

という問題がありました。

上は単純に、アニメーションする部品の中に SVG 画像を組み込むときに困ります。下はたとえば、 UI 部品をそれぞれコンポーネントとして実装していて:

.button {

color: $ButtonFg;
background-color: $ButtonBg;
padding: $ButtonPadding;
}

.button:hover {
color: $HoverButtonFg;
background-color: $HoverButtonBg;
}

特定のボタンだけアイコン付きにしたい:

<button class="button">

ほげほげ
<svg ... />
</button>

とかなった場合に困ります (SVG には color が反映されませんが、 SVG を突っ込まれるのを見越して fill プロパティを設定しておくというのもなんか癪です)。

そんなわけで、 SVG アイコンの色をテキスト色 (color) で塗る方法を調べました。


答え

答えです: https://jsfiddle.net/zsvfdfzj/13

CSS では、 currentColor で現在の color の値を取ることができます (しらなかった!)。これを fill に設定してやれば、 SVG の親要素の color がそのまま SVG を塗るときの色になります。

たとえば、 SVG の fill にデフォルトで親の color を適用する CSS:

svg {

fill: currentColor;
}

をポイッと設置してやれば諸々うまくいきます。

SVG の一部分だけを塗りたい場合は、あらかじめ設定しておいたクラスに対してスタイルを適用すれば ok です。

.fill {

fill: currentColor;
}

参考までに、自分は、テキストの一部として(絵文字的に) SVG を使うためにこんな CSS をあてています:

svg.text {

height: 1em;
vertical-align: text-bottom;
fill: currentColor;
}


おまけ: SVG から色を抜く

SVG がイラレとか Sketch とかデザインツールで作られている場合、 SVG 画像自体が色情報を持っていることが多いです。

/* 青い円 */

<svg class="text" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="100" fill="blue"/>
</svg>

そんな場合は、目視でそれっぽい要素を探して、 fill 属性を消します。

/* 塗りつぶし色が未定義の円ができた */

<svg class="text" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="100" />
</svg>

fill を持つ要素がネストしていて、塗りたいのが内側の要素の場合は、クラス名をつけておきます:

/* before */

<hogehoge fill="hogehoge">
<fugafuga fill="fugafuga" ... />
</hogehoge>

/* after */
<hogehoge fill="hogehoge">
<fugafuga class="fill" ... />
</hogehoge>