logo标签列表

SVG在Flutter中：SVG异常捕获

fluttersvg
8

我正在使用最新的库更新

dependencies:
  flutter_svg: ^0.17.4




Container( height: 150, //color: Colors.blue, width: screenWidth * 0.80, child: SvgPicture.asset( "assets/logo-violeta-NVIAME-login.svg", color: Color(0xFF6327f8), ), ),
------------------------------------------------------------------------

我的代码运行正常，但在进行热重启后，我遇到了以下异常

The <style> element is not implemented in this library.

Style elements are not supported by this library and the requested SVG may not render as intended.

If possible, ensure the SVG uses inline styles and/or attributes (which are supported), or use a preprocessing utility such as svgcleaner to inline the styles for you.


Picture key: AssetBundlePictureKey(bundle: PlatformAssetBundle#60537(), name: "assets/logo-violeta-NVIAME-login.svg", colorFilter: ColorFilter.mode(Color(0xff6327f8), BlendMode.srcIn))
════════════════════════════════════════════════════════════════════════════════
I/flutter (26058): unhandled element metadata; Picture key: AssetBundlePictureKey(bundle: PlatformAssetBundle#60537(), name: "assets/logo-violeta-NVIAME-login.svg", colorFilter: ColorFilter.mode(Color(0xff6327f8), BlendMode.srcIn))

enter image description here

删除属性颜色后，我仍然遇到了相同的错误，请问您能告诉我如何使用映射属性吗？ - Eduardo Gonzalez
https://github.com/RazrFalcon/svgcleaner-gui/releases/download/v0.9.5/svgcleaner_win32_0.9.5.exe - - - - 解决这个问题的方法是使用SVGCleaner并替换文件。在我的情况下，我仍然使用之前的代码。 - Eduardo Gonzalez
3个回答
9

您实际使用的是SVG图像。

如错误提示所述：

The <style> element is not implemented in this library.

Style elements are not supported by this library and the requested SVG may not render as intended.

If possible, ensure the SVG uses inline styles and/or attributes (which are supported), or use a preprocessing utility such as svgcleaner to inline the styles for you.

flutter_svg包不支持带有内部CSS的svg，例如：

 <style>
       .....
  </style>

这里有一个开放的GitHub问题，表明它尚未支持。（传送门）

以下是一些可尝试的选项：

但最简单的方法是尽量让设计工具不使用 CSS。

1
svgcleaner和svgomg对我没有起作用。 - Jérémy
2

我的解决方法：将SVG文件拖放到Figma设计工具中，然后导出所有文件，以获取标准的无错误SVG文件。

1
最好的解决方案，而不是绕过方式。 - PeakGen
0

我也遇到了这个问题，后来使用了“SVG清理器”应用程序来清理和内联SVG代码。 最后它正常工作了 ^_*

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接