Flutter中的SvgPicture图像渲染错误答案

【问题标题】：SvgPicture image rendering error in flutterFlutter中的SvgPicture图像渲染错误
【发布时间】：2020-07-26 21:35:25
【问题描述】：

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

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

错误是

══╡ SVG 检测到异常╞════════════════════════════════════════ ════════════════════════════════ 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)：此错误被视为非致命错误，但您的 SVG 文件可能不会按预期呈现

【问题讨论】：

请包含定义和使用paint0_linear的文件
对不起，我不知道什么是paint0_linear？你能解释一下吗
从您的错误消息 Failed to find definition for url(#paint0_linear) I/flutter (18256) 那么什么文件包含它？您可以将该文件的内容添加到问题中吗？
@lokeshpaladugula，我认为他希望您将 otpLogo.svg 的内容附加到帖子中。我遇到了同样的错误，但我无权共享文件内容。会不会是this file？
@ThinkDigital 我也有。在下面试试我的答案，看看是否有帮助。

标签： image flutter svg

【解决方案1】：

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

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

无论如何，对我来说，解决方案是编辑 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>

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

【讨论】：

这是对应的问题：github.com/dnfield/flutter_svg/issues/102
你能否在编辑之前和之后发布 svg 文件的示例，因为我不确定我应该把放在哪里
@Jan 好的...我在上面添加了一个示例案例以供参考。
谢谢，虽然我的 SVG 文件有更多的信息，但是当我做你做的事情时它不起作用，你能检查一下吗？无法在此处发布代码，其文件名很多：bku7.svg ufile.io/xnjwekoh
@Jan 你面临什么样的错误，顺便说一句？您的错误信息是否与上面的 OP 相同？你试过optimizing your SVG吗？

【解决方案2】：

之前在我的 svg 文件中：

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

在我的 svg 文件中：

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

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

【讨论】：