如何让 Flutter 应用显示使用 `href` 的 SVG 图像？

Question

我想在我的 Flutter 应用程序中显示 SVG 图像，但它们没有显示，因为我在其中使用了

href

。 在这种情况下有什么办法可以显示这些SVG图像吗？

顺便说一下，

href

的用法是这样的。

<use xlink:href="#image0_11_2222" transform="scale(0.00100000 0.00200000)"/>

<image id="image0_11_2222" width="300" height="300" xlink:href="data:image/png;base64,
...

顺便说一句，如果我删除了使用

href

的部分，应用程序就不再正常了。

Answer 1

为了使用 svg 图片作为 asset 或 url，你需要添加 flutter_svg 插件，这个插件为 svg 图片提供了许多实用工具

1. 对于网络 svg 图像

final Widget networkSvg = SvgPicture.network(
  'https://site-that-takes-a-while.com/image.svg',
  semanticsLabel: 'A shark?!',
  placeholderBuilder: (BuildContext context) => Container(
      padding: const EdgeInsets.all(30.0),
      child: const CircularProgressIndicator()),
);

2.对于资产图像

final String assetName = 'assets/up_arrow.svg';
final Widget svgIcon = SvgPicture.asset(
                     assetName,
            colorFilter: ColorFilter.mode(Colors.red, BlendMode.srcIn),
            semanticsLabel: 'A red up arrow'
               );