【React】svgファイルの塗りつぶしや線色をCSSで指定する

スポンサーリンク

svgファイルのCSS指定

svgファイルをHTMLで表示する場合、imgタグで表示するとCSSを使った色指定等ができません。

例えば、星の形をしたsvgファイルを表示したい場合は以下のようにsvgタグで記述します。

<svg className={'star'} viewBox="0 0 18 18">
  <path d="M4.103 16.984L9 14.159l4.897 2.825a.156.156 0 0 0 .231-.168l-1.173-5.53 4.2-3.786a.156.156 0 0 0-.088-.271l-5.622-.594-2.302-5.163a.156.156 0 0 0-.286 0L6.555 6.635.933 7.23a.156.156 0 0 0-.088.271l4.2 3.785-1.173 5.53a.156.156 0 0 0 .23.169z"/>
</svg>

CSSは普通に下のように定義します。fillなどのプロパティはsvg独自のものです。backgroud-color等では色は変わらないので注意してください。

.star {
  fill: red;
  stroke: blue;
}

fillは塗りつぶし、strokeは線の色なので、正しく適用されていれば下のような星が表示されます。

参考ページは下記

How can I change the color of an 'svg' element?
I want to use this technique and change the SVG color, but so far I haven't been able to do so. I use this in the CSS, but my image is always black, no matter w...

未経験、異業種からIT業界に転身。フロントエンジニア。主にJavascript(React.js)をつかったWEBアプリ開発にたずさわる。
お問い合わせ、ご相談など → genpsp10@gmail.com

psp7をフォロー
プログラミング
スポンサーリンク
psp7をフォロー
ハトらぼ

コメント