Flutter：背景中的SVG图像出现错误

Question

我需要将SVG图片放在背景中，同时让文本显示在顶部。当我使用Flutter_SVG包中的SVG图片时，我遇到了以下错误。

I/flutter (24437): Unsupported operation: Could not resolve image href: Component%206%20-%201-image.png

Picture provider: ExactAssetPicture(name: "assets/images/login_header.svg", bundle: null,
I/flutter (24437):   colorFilter: ColorFilter.mode(MaterialColor(primary value: Color(0xfff44336)), BlendMode.srcIn))
I/flutter (24437): Picture key: AssetBundlePictureKey(bundle: PlatformAssetBundle#32e52(), name:
I/flutter (24437):   "assets/images/xxx.svg", colorFilter: ColorFilter.mode(MaterialColor(primary value:
I/flutter (24437):   Color(0xfff44336)), BlendMode.srcIn))

- Balaji Ks

---

请确保您的图像文件名只包含小写字母和下划线。 - Darish

@Darish，那不是问题所在。问题在于该软件包尚不支持滤镜效果。 - Balaji Venkatraman

Answer 1

flutter_svg包不支持滤镜效果。很遗憾，当前版本的软件包不支持此功能。这只有可能实现。

无论如何，其中一种方法（糟糕的解决方法）

• 将阴影转换为位图（不是正确的解决方法）

请在Github Issues上关注此问题。希望该功能能够尽快提供，正如软件包开发人员所说。

- Balaji Venkatraman

Answer 2

需要清除SVG图像中的缓存。可以通过SVGCleaner完成，并且在我们的项目中可以使用。

- Balaji Ks

Answer 3

下载 SVG CLEANER "下载" 并清理文件，然后在文本编辑器中打开 .SVG 文件并更改以下内容：

并添加

这样应该就足够了，我遇到过这个问题好几次，只有这样才能解决。

- Ariel E. Cavadia

Answer 4

执行以下命令：flutter clean && flutter pub get

- Muhammad Hassan Osama

Answer 5

我通过将svg文件拖放到Figma设计工具中并将它们全部导出来，成功解决了问题，获取了标准无误的svg文件。

- Son Nguyen