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

TL;DR

currentColor で「現在の文字色」が取れました。

なにをやったか

ウェブページに 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 を使うためにこんな 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" fill="blue"/>
+  <circle cx="100" cy="100" r="100" />
 </svg>

SVG 中の一部の要素だけを塗りたい場合は、 SVG 側にクラス名をつけておきます:

 <hogehoge fill="hogehoge">
-  <fugafuga fill="fugafuga" ... />
+  <fugafuga class="fill" ... />
 </hogehoge>

.fill {
  fill: currentColor;
}