Flutter web：svg 上未处理的元素过滤器

Question

我将我的项目更新为 flutter 2.0.2，没有空安全性。现在我正在尝试在网络上吃午餐（chrome）。当应用程序在启动页面中启动时，我加载了一个 svg 图像。svg 已加载到 chrome 上，但在终端中我看到此错误：unhandled element filter; Picture key: AssetBundlePictureKey(bundle: PlatformAssetBundle#0a707(), name: "assets/svgs/splash.svg", colorFilter: null) 这是 flutter slpash svg 代码：

\n

Stack(children: [\n        Container(\n            width: double.infinity,\n            height: double.infinity,\n            child: SvgPicture.asset(\n              R.assetsSvgsSplash,\n              fit: BoxFit.cover,\n            ),),\n

\n

我在用flutter_svg: ^0.19.3

\n

这位医生：

\n

Doctor summary (to see all details, run flutter doctor -v):\n[\xe2\x9c\x93] Flutter (Channel stable, 2.0.2, on Linux, locale en_US.UTF-8)\n[\xe2\x9c\x93] Android toolchain - develop for Android devices (Android SDK version 30.0.0-rc1)\n[\xe2\x9c\x93] Chrome - develop for the web\n[\xe2\x9c\x93] Android Studio (version 4.0)\n[\xe2\x9c\x93] VS Code (version 1.54.2)\n[\xe2\x9c\x93] Connected device (1 available)\n\n\xe2\x80\xa2 No issues found!\n

\n

Answer 1

似乎 SVG 库不支持某些（任何？）过滤器。

我通过删除SVG 图像文件中的<filter ...>...</filter>标签和属性（只需使用文本编辑器）来摆脱该消息。filter="url(#filter-3)"

我的图像没有任何我实际需要的滤镜，因此图像仍然正确，并且消息消失了。如果您的图像具有某些过滤器，需要正确显示，那么这可能不是正确的解决方案:)

Answer 2

阅读@Felix所说的后，我在Illustrator中打开.svg，并使用以下设置将其导出为SVG

问题消失了，生成的 SVG 甚至缩小了大小 (kbs)