项目需要修改 SVG 图片的文本数值，根据服务器接口，显示真实用户数据，其实像这种需求，不一定非要用 SVG 来操作，直接在背景图上使用文本控件，根据条件修改文本内容也是一样的。

但怎么说呢，有些复杂布局的图片，特别是有动画的布局，操作 SVG 也挺方便的，上面图片红框区域就是一个整体 SVG 图片，Flutter 加载操作 SVG 文件比较方便。我们现在的需求就是修改 SVG 图片中的数值 120。其他的颜色、大小的修改都是一样，可以按照下面步骤实现。

  # 加载SVG图片 https://pub.dev/packages/flutter_svg
  flutter_svg: ^2.0.7

引入 flutter_svg ，和普通使用 SvgPicture.asset 不一样，我们使用 SvgPicture.string 加载 SVG 图片。既然可以把 SVG 内容当做字符串加载。那理论上，我们只要读取到这个 SVG 图片的字符串，然后使用字符串 API 操作数值的文本，进而影响 SVG 图片的显示。

    @override
  void initState() {
    loadOriginalSvg();
    super.initState();
  }

  Future<void> loadOriginalSvg() async {
    String svgData = await rootBundle.loadString(R.assetsImageOrderTotal);
    setState(() {
      svgStringOrderTotal = svgData; // 加载完成后，更新状态并触发重建
    });
  }

现在已经读取到这字符串了，接着使用字符串 API 操作 SVG ，假设下面是文本这一段的 SVG 内容。

<text fill="#103A43" xml:space="preserve" style="white-space: pre" font-family="HarmonyOS Sans" font-size="24" font-weight="bold" letter-spacing="0em" text-anchor="middle"><tspan x="48" y="68.208">120</tspan></text>

其实要做的就是使用 replaceAll 方法替换数值 120 ，

svgStringOrderTotal = svgStringOrderTotal.replaceAll("120", "100");

但这里有个问题，120 这个数值文本并不特殊，万一这 SVG 图片其他地方也存在这样一个字符串，那也会被替换掉。所以，最好先给这字符串目标位置，设置成特殊唯一占位符。我这使用 {{order_count}} ，个人喜好。

<text fill="#103A43" xml:space="preserve" style="white-space: pre" font-family="HarmonyOS Sans" font-size="24" font-weight="bold" letter-spacing="0em" text-anchor="middle"><tspan x="48" y="68.208">{{order_count}}</tspan></text>

那替换代码就改成

svgStringOrderTotal = svgStringOrderTotal.replaceAll("{{order_count}}", "100");

其他的颜色，大小都是同理，可以按照这个思路实现，OK 希望以上能帮到你。

本文由老郭种树原创，转载请注明：https://guozh.net/flutter-dynamic-modify-svg-text-font-size-color/