flutter 渲染抖动时发生SVG图像错误

lpwwtiir  于 2023-03-31  发布在  Flutter
关注(0)|答案(3)|浏览(144)

**错误信息如下所示。**解析AssetBundlePictureKey(bundle:平台资产捆绑包#9940f(),名称:“assets/icons/academy.svg”,colorFilter:null,主题:SvgTheme(currentColor:null,fontSize:14.0,xHeight:7.0))in _getDefinitionPaint:无法找到url的定义(#pattern0)

此库仅支持和xlink:href引用,这些引用在引用之前定义。
当所需的定义定义在引用它的元素之后(例如,在文件的末尾)或在另一个文件中定义时,可能会导致此错误。
此错误被视为非致命错误,但SVG文件可能无法按预期呈现

我的SVG文件包含图像image.svg

<svg width="69" height="69" viewBox="0 0 69 69" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="16" y="19" width="37" height="31" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_42_579" transform="translate(0 -0.030613) scale(0.00221729 0.00264645)"/>
</pattern>
<image id="image0_42_579" width="451" height="401" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcMAAAGRCAYAAAAZwNgiAAAgAElEQVR4Aex9B3iV1Zb2NzN35s7cf+7c+8/8c1VARUSaIgiIBRAVRdELtotdJCfoVa9iA6lJvvTek5Oek957L6T33nsjvRACXDcN74r1xD7gX3BPuDfeIe+3s55LfEwQEAUX5/+1kjN9Wr/KbAAAAAElFTkSuQmCC"/>
</defs>
</svg>

且image.svg在display.dart中显示为

class Display extends StatelessWidget {
  const Display({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('icons')),
      body: Column(
        children: [
          SvgPicture.asset(
            'assets/images/image.svg',
            height: 400.0,
            width: 300.0,
            allowDrawingOutsideViewBox: true,
          ),
        ],
      ),
    );
  }
}
d5vmydt9

d5vmydt91#

我的建议是先下载Svg镜像文件,然后在pubspec.yaml中添加flutter_svg: ^1.0.3
在assets文件夹中添加Svg图像。
然后在项目中使用它

final String assetName = 'assets/image.svg';
final Widget svg = SvgPicture.asset(
  assetName,
  semanticsLabel: 'Acme Logo'
);
euoag5mw

euoag5mw2#

请在使用SVG之前检查它
请通过链接
https://www.svgviewer.dev/
你的形象有些问题

ikfrs5lh

ikfrs5lh3#

如果你遇到这种错误。

url(#paint0_linear_8372_53236) not found

然后只要在任何SVG编辑器(VS代码或任何在线工具)中打开它,就可以找到SVG代码中的内容
并将定义移到调用它的位置的顶部。

相关问题