Flutter中的SvgPicture图像渲染错误

Question

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

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

错误是

？？？SVG 捕获的异常 ?????????????????????????????????????????????? ?????????????????????????????? I/flutter (18256): _getDefinitionPaint 中抛出以下断言: I/flutter (18256): Failed to find definition for url(#paint0_linear)
I/flutter (18256): 这个库只支持和 xlink:href 引用是在他们的 I/flutter (18256) 之前定义：参考。I/flutter (18256)：当所需的定义在引用它的元素之后定义 I/flutter (18256):（例如在文件末尾）或在另一个文件中定义时，可能会导致此错误。I/flutter (18256)：此错误被视为非致命错误，但您的 SVG 文件可能无法按预期呈现

Answer 1

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

当在引用它的元素之后定义所需的定义时，可能会导致此错误...

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

您可以使用此在线工具改进和优化 SVG 代码结构。然后defs按照上面的说明简单地剪切和粘贴。

尽管如此，关于这个特定问题的 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>

注意：注意defs标签位置的变化。

Answer 2

之前在我的svg文件中：

<svg>
  <g>
     ...
  </g>
  <defs>
     ...
  </defs>
</svg>

在我的svg文件中之后：

<svg>
  <defs>
     ...
  </defs>
  <g>
     ...
  </g>
</svg>

<defs></defs>向上移动！