path 要素の fill が指定されている SVG は svg 要素の fill を CSS で変えても意味がない

多くの 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 属性が指定された状態で出力されることがあるようです。