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, b...
コメント