我试图使用Fluttersvg,但负荷与黑色svg

8xiog9wr  于 2023-04-13  发布在  Flutter
关注(0)|答案(9)|浏览(138)

我尝试使用FlutterSVG依赖项,我在assets中放入svg,在pubspec.yaml中设置,并在我的小部件中设置,但是,svg使用黑色容器加载
我已经试过改变svg了,另一个svg工作正常,但另一个不行。。

final Widget svg = SvgPicture.asset(assetName, semanticsLabel: 'Acme Logo');

Flutter 中SVG
Here the svg
我期望的响应是像codepen中的链接一样的彩色svg,但我得到了this

o75abkj4

o75abkj41#

这可能是因为互联网上损坏的SVG文件而发生的。我以前遇到过这个问题,并尝试了许多方法来解决它。但最后,我在这个软件的帮助下解决了它,svgcleaner
here将应用程序下载到您的操作系统
安装后,
1.导入SVG。

1.单击运行。

1.成功!在这里你可以看到你的SVG '清理成功。

清理后,您可以从输出文件夹位置获取这些SVG文件,并将这些文件添加到flutter应用程序中,而不会看到任何黑色SVG。
像这样就很好用了。

vcudknz3

vcudknz32#

我想我迟到了,但这可能只是帮助别人。只要使所有的样式在您的svg图像使用内联样式,否则所有的颜色和样式将不会呈现为标签是不可读的svgPicture。

z4iuyo4d

z4iuyo4d3#

我发现这个网站它解决了我的问题与SVG文件是出于颜色。
https://iconly.io/tools/svg-cleaner

oo7oh9g9

oo7oh9g94#

我用最新版本的jovial_svg尝试了这个SVG资源,它工作得很好!下面是结果:

这个版本的jovial_svg应该在几天内发布,但现在它是1.1.4-rc.4。
(This asset帮助我充实了样式表支持-谢谢!)

rfbsl7qr

rfbsl7qr6#

如果您没有解决方案,请尝试将您的图像从svg转换为png并用途:
Image.asset('assets/images/image.png',)

yws3nbqq

yws3nbqq7#

一些SVG图像使用样式标签,如果您尝试使用flutter_svg加载此类图像,图像将无法按预期呈现。目前flutter_svg仅支持通过内联样式进行样式化,而不是一些SVG文件可能包含的样式标签(在我的情况下,我从Adobe XD导出图像,它在标签中包含所有样式)。当您尝试加载此类SVG图像时,您将得到以下错误:
======== SVG捕获到异常==============================================================================================================================================================================================================================================该
元素未在此库中实现。此库不支持样式元素,请求的SVG可能无法按预期呈现。如果可能,请确保SVG使用内联样式和/或属性(受支持),或使用svgcleaner等预处理实用程序为您内联样式。
这个错误提到使用内联样式而不是样式标签,你可以使用svgcleaner(如@Alif的回答中所提到的)或类似的实用程序来转换SVG文件与内联样式。
更多细节,请参考此链接检查SVG与flutter_svg的兼容性以及处理其他用例

0h4hbjxa

0h4hbjxa8#

而不是清理SVG文件,这是不能接受的应用程序客户端清理每一个SVG他需要它

*使用此SVG插件解决问题

https://pub.dev/packages/jovial_svg

ScalableImageWidget.fromSISource(
              si: ScalableImageSource.fromSvgHttpUrl(
                Uri.parse(imgPath),
              ),
            ),
vd2z7a6w

vd2z7a6w9#

试试这个:

Container(
  child: SvgPicture.asset(
       'assets/images/image.svg',
        fit: BoxFit.contain,
  ),
)

相关问题