Help us understand the problem. What is going on with this article?

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;
}
zk_phi
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした