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は線の色なので、正しく適用されていれば下のような星が表示されます。
![](https://hatolabo.com/wp-content/uploads/2019/04/56a59a1af010c8b8ab42791306123d38.png)
参考ページは下記
Attention Required! | Cloudflare
コメント