我使用svgPicture来显示图像,每次一开始它显示错误,然后它显示图像。
SvgPicture.asset(
'assets/Images/otpLogo.svg',
height: SizeConfig.blockSizeVertical * 26,
),
并且误差为
SVG捕获的异常I/flutter(18256):在_getDefinitionPaint中引发了以下Assert:I/扑动(18256):找不到URL(#paint0_linear)的定义
I/扑动(18256):此库仅支持在其I/flutter(18256)之前定义的和xlink:href引用:参考文献。I/Flutter(18256):如果所需定义是在引用它的元素I/flutter(18256)之后定义的,则会导致此错误:(如在文件末尾),或在另一个文件中定义. I/flutter(18256):此错误被视为非致命错误,但SVG文件可能无法按预期方式呈现
8条答案
按热度按时间uemypmqf1#
我不确定这是否是确切的问题,因为您没有提供代码到SVG文件,但根据错误消息,它说:
如果所需定义是在引用它的元素之后定义的,则会导致此错误...
无论如何,对我来说,解决方案是编辑SVG文件,并将**
<defs>
标记及其所有内容移动到<svg>
**标记的开头下方。您可以使用this online tool来改进和优化SVG代码结构,然后简单地剪切和粘贴
defs
(如上所述)。尽管如此,关于这个特殊的问题仍然有一个open issue in the repo。
示例案例:
固定版本:
**注意:**请注意
defs
标记的位置变化。quhf5bfb2#
在我的svg文件之前:
在我的svg文件中之后:
将
<defs></defs>
上移!olhwl3o23#
关于这个行为的一些信息。例如,如果你从Figma导出,就会发生这种情况。并且确保把
<defs></defs>
放在〈svg开始标记之后。即使你在顶部有〈path这样的东西i2byvkas4#
我从Figma下载SVG后遇到了同样的事情。
然后我试着
这对我很有效。
kyxcudwk5#
此错误表示SVG未正确导出。连接到用户的有问题的层可能未按预期呈现。
成功的渲染实际上取决于每一个单独的设备,所以如果它显示正确,例如iOS模拟器并不一定意味着它将正确渲染在每一个设备上(在我的经验,它没有)。
解决方案可能是尝试以不同的方式导出它,或者如果可能的话,将其切换为PNG等格式。
62o28rlo6#
错误消息实际上告诉我们如何修复它:
这意味着如果您的svg是:
请将
<defs>
设置在其使用之前。这样下面的svg就可以工作了:6uxekuva7#
如果将defs重新排列到顶部的解决方案不起作用,只需删除pattern、rect和defs标签,只保留image标签
6rqinv9w8#
如果您有来自svg图像png,请按照以下步骤操作:
1-通过此链接将png转换为svg:https://express.adobe.com/pt-BR/tools/convert-to-svg
2-将png转换为svg后,将其插入到您的项目中。
3-如果图像的背景不具有透明度,请在IDE(Android Studio或Visual Studio)中打开图像文件,显示图像代码,转到第三行或将其关闭,将选项“opacity”更改为opacity=”0”