⚡
【flutter_svg】Failed to find definition for url エラー
事象
flutter_svg[1] にて.svgファイル読み込みの際、以下のエラー。
画面に画像が表示されるものの linearGradientで定義されたカラーがうまく反映されていない。
Failed to find definition for url(#paint0_linear_4170_3084)
This library only supports <defs> and xlink:href references that are defined ahead of their references.
This error can be caused when the desired definition is defined after the element referring to it (e.g. at the end of the file), or defined in another file.
This error is treated as non-fatal, but your SVG file will likely not render as intended
解決策
元々以下のようだった.svgファイルを...
<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.19571 32.....1653Z" fill="url(#paint0_linear_4170_3084)"/>
<defs>
<linearGradient id="paint0_linear_4170_3084" x1="0.503406" y1="-9.29428" x2="-9.5454" y2="36.2394" gradientUnits="userSpaceOnUse">
<stop offset="0.015625" stop-color="#C66135"/>
<stop offset="1" stop-color="#DFCE37"/>
</linearGradient>
</defs>
</svg>
以下のように修正する。 <defs> が <path>より先になっている。
SVGのXMLを直接編集したのははじめてだった。
<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="paint0_linear_4170_3084" x1="0.503406" y1="-9.29428" x2="-9.5454" y2="36.2394" gradientUnits="userSpaceOnUse">
<stop offset="0.015625" stop-color="#C66135"/>
<stop offset="1" stop-color="#DFCE37"/>
</linearGradient>
</defs>
<path d="M3.19571 32.....1653Z" fill="url(#paint0_linear_4170_3084)"/>
</svg>
原因
エラーには以下のようにある。
This library only supports <defs> and xlink:href references that are defined ahead of their references.
参照よりも定義が先に来るようにすることで解決した。
<path d="M3.19571 32.....1653Z" fill="url(#paint0_linear_4170_3084)"/>
<path>内で <linearGradient id="paint0_linear_4170_3084"...> の idを参照しているため、この参照を <def> より後にすることで解決した。
参考
Discussion