インラインで使ってるSVG画像の一部が消える！

無駄に1時間ぐらい掛かったしchatGPT先生もお悩みだったので書き残し。

起きた事

1. SVG画像をインラインで利用する必要があり複数の画像を設置
2. PCで確認すると一部の画像が欠けている
3. 正しく表示されている画像もある

原因

複数の画像でidが重複していた事が原因。
今回だとclip-pathに指定されるIDが複数の画像で同一名になっていました。

<svg>
  <defs>
    <clipPath id="clip-path">
      <rect />
    </clipPath>
  </defs>
  <g clip-path="url(#clip-path)">
    <path />
  </g>
</svg>

対応

idに連番などを付けてユニークな値にする