SVGの色が変わらない？CSSで色を操作する方法

はじめに

こんにちは。HRBrainでオウンドメディア・ランディングページの開発を担当している渡邉です。

先日、SVGの色をCSSで変更しようとした際に、なかなか色が変わらなくて困ってしまいました。

この記事では、SVGの色がCSSで変更できない場合の原因と、2つの解決策をわかりやすく解説します。

SVGの色を変更できない原因

fill属性に直接色が指定されていると、その色が固定されてしまい、CSSのcolorプロパティによる変更が適用されなくなります。

<div class="parent">
  <svg>
    <rect width="100" height="100" fill="#000" />
  </svg>
</div>

<style>
  .parent {
    color: red; // 効きません
  }
</style>

See the Pen svg_fill_bad by Tasuku Watanabe (@tasukuwatanabe) on CodePen.

解決策1：fill属性にcurrentColorを指定する

この問題を解決するには、fill属性にcurrentColorという値を指定します。

currentColorは、SVGのfill属性やstroke属性に指定できる特別な値で、親要素のcolorプロパティに設定された色を継承します。

例えば、以下のように親要素にcolor: red;を指定した場合、SVGのrect要素は赤色になります。

<div class="parent">
  <svg>
    <rect width="100" height="100" fill="currentColor" />
  </svg>
</div>

<style>
  .parent {
    color: red;
  }
</style>

See the Pen Untitled by Tasuku Watanabe (@tasukuwatanabe) on CodePen.

currentColorを指定して色操作する利点

CSSのcolorプロパティでSVGの色を操作する利点として、併用するテキストなどと一緒に色操作が行える点です。

SVGのアイコンは以下のようにテキストと一緒に使うケースが少なくありません。

そのような場合に、親要素でcolorプロパティを設定することで、子要素の色を連動して操作することができます。

See the Pen svg_in_button by Tasuku Watanabe (@tasukuwatanabe) on CodePen.

解決策2：CSSのfillプロパティで色を指定する

CSSのfillプロパティで色を指定する方法もあります。

<svg>
  <rect width="100" height="100" />
</svg>

<style>
  svg rect {
    fill: red;
  }
</style>

See the Pen Untitled by Tasuku Watanabe (@tasukuwatanabe) on CodePen.

以前は頻繁にfillプロパティを使ってSVGの色指定をしていたのですが、fill="currentColor"の存在を知ってからは、あまり使わなくなりました。

この指定方法は、SVG内の個々の要素に異なる色を設定したい場合などに適しています。

See the Pen Untitled by Tasuku Watanabe (@tasukuwatanabe) on CodePen.

まとめ

SVGの色をCSSで操作する場合、以下のような方法が挙げられます。

• fill="currentColor"を指定してcolorプロパティで操作する方法
• CSSのfillプロパティで色を操作する方法

特に、currentColorは親要素のcolorプロパティの色を継承するため、テキストと連動して色を変更することができ、非常に便利です。

SVGは色々な属性があるため複雑に感じるかもしれませんが、実際に使ってみて、その便利さを実感してみてください。

PR

HRBrainではフロントエンドエンジニア（コミュニケーションデザイン）の採用も行なっているので、ぜひ！