flutter - 如何在 flutter 中将颜色应用于多色 svg？

Question

我正在寻找 flutter 插图 svg 的颜色变化。我尝试了 flutter_svg 包，但它只支持对 svg 应用一种颜色，如果我这样做，svg 将显示为单一颜色 svg，单个颜色将丢失。有什么方法可以在运行时为多色 svg 更改颜色？

Answer 1

你的意思是这样的吗？我称之为 SVG 着色。

我将尝试将这个概念压缩到一个简短的摘要中。在 SVG 文件中，您需要使用 fill 属性，因为它定义了十六进制颜色代码。

在编程方面，您将:

1. 将 SVG 文件数据提取为 String 变量 svgCode。

1. 在 previousColor 中分配前一个十六进制颜色代码，在 newColor 中分配当前选择的十六进制颜色代码。

1. 在 svgCode 上应用 String.replaceAll 方法来替换颜色。

1. 更新 previousColor 的值。

更简短的阐述是

/// Initially without any color selection.
SVGPicture.string('''<svg code with fill #f7ebcb>''');

/// After the user selects the red color.
SVGPicture.string('''<svg code with fill #FF0000>''');

This tutorial可以帮助解决您的问题。不仅 this app在运行时更改颜色，但它也允许用户下载经过处理的 SVG 代码。