image - flutter 中的SvgPicture图像渲染错误

Question

我使用 svgPicture 来显示图像，并且每次首先显示错误，然后显示图像。

SvgPicture.asset(
 'assets/Images/otpLogo.svg',
  height: SizeConfig.blockSizeVertical * 26,                      
),

错误是

SVG捕获的异常(exception)═════════════════════════════
I/flutter (18256):在 _getDefinitionPaint 中抛出了以下断言:
I/flutter (18256): 找不到 url 的定义 (#paint0_linear)
I/flutter (18256):这个库只支持和 xlink:href 在它们之前定义的引用
I/flutter (18256):引用资料。
I/flutter (18256):当在引用它的元素之后定义所需的定义时，可能会导致此错误
I/flutter (18256):(例如在文件末尾)，或在另一个文件中定义。
I/flutter (18256):此错误被视为非 fatal error ，但您的 SVG 文件可能不会按预期呈现

Answer 1

我不确定这是否是确切的问题，因为您没有向 SVG 文件提供代码，但根据错误消息，它说:

This error can be caused when the desired definition is defined after the element referring to it...

无论如何，对我来说，解决方案是 编辑 SVG 文件 并移动 <defs> 标记及其所有内容，直到 开头的正下方<svg> 标签。

您可以使用 this online tool 改进和优化您的 SVG 代码结构。 .然后简单地剪切并粘贴defs如上所述。
尽管如此，仍然有一个 open issue in the repo关于这个特殊问题。

示例案例:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
    <g fill="none" fill-rule="evenodd" transform="translate(8 6)">
        <mask id="prefix__b" fill="#fff">
            <use xlink:href="#prefix__a"/>
        </mask>
        <g fill="#FFF" mask="url(#prefix__b)">
            <path d="M0 0H24V24H0z" transform="translate(-8 -6)"/>
        </g>
    </g>
    <defs>
        <path id="prefix__a" d="M7.705 1.41L6.295 0 0.295 6 6.295 12 7.705 10.59 3.125 6z"/>
    </defs>
</svg>

固定版本:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
    <defs>
        <path id="prefix__a" d="M7.705 1.41L6.295 0 0.295 6 6.295 12 7.705 10.59 3.125 6z"/>
    </defs>
    <g fill="none" fill-rule="evenodd" transform="translate(8 6)">
        <mask id="prefix__b" fill="#fff">
            <use xlink:href="#prefix__a"/>
        </mask>
        <g fill="#FFF" mask="url(#prefix__b)">
            <path d="M0 0H24V24H0z" transform="translate(-8 -6)"/>
        </g>
    </g>
</svg>

Note: Notice the changing position of the defs tag.