多くの SVG は svg 要素と path 要素で構成されています。
<svg
class="heart pink"
width="32"
height="32"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
fill="black"
>
<path
d="M 10,30
A 20,20 0,0,1 50,30
A 20,20 0,0,1 90,30
Q 90,60 50,90
Q 10,60 10,30 z"
/>
</svg>
また、上述の SVG は以下の CSS で塗り潰し色を変えることができます。
.pink {
fill: pink;
}
ただし、 svg 要素ではなく path 要素の fill 属性で塗り潰し色が指定されていた場合、先述の CSS では色を変更することができません。
言い換えると、 path 要素の fill 属性が指定されていた場合、 svg 要素の fill 属性よりもそちらが優先されます。
<!-- CSS で色をピンクに変更している SVG -->
<svg
class="heart pink"
width="32"
height="32"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
fill="black"
>
<path
d="M 10,30
A 20,20 0,0,1 50,30
A 20,20 0,0,1 90,30
Q 90,60 50,90
Q 10,60 10,30 z"
/>
</svg>
<!-- CSS で色をピンクに変更しようとしているが、できていない SVG -->
<!-- svg 要素ではなく path 要素に fill="black" を指定している -->
<svg
class="heart pink"
width="32"
height="32"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="black"
d="M 10,30
A 20,20 0,0,1 50,30
A 20,20 0,0,1 90,30
Q 90,60 50,90
Q 10,60 10,30 z"
/>
</svg>
上記コードの動作サンプルは↓にあります。
path 要素の fill 属性で塗り潰し色が指定されている SVG は、以下の CSS で色が変更できます。
（@nagtkk さんありがとうございます。）
.pink > path {
fill: pink;
}
ちなみに、筆者がこの問題にぶつかった時に開発していたのは Web ではなく React Native プロダクトであったため、上述のようなスタイリングは書けませんでした。（僕が書き方を知らないだけ...？）
なので、 svg 要素が fill 属性を持つように SVG ファイルの中身を編集して対応しました。
Figma などで画像を SVG 形式でエクスポートすると、 svg 要素ではなく path 要素の fill 属性が指定された状態で出力されることがあるようです。
↧