如何使用 Flutter 和 flutter_svg 对 SVG 图像的特定部分进行着色？

Question

我正在开发一个 Flutter 应用程序，我需要显示带有肌肉的人体轮廓，并且我希望用户根据他们的输入动态地为特定肌肉着色。我正在使用 flutter_svg 包来处理 SVG 图像。

这是代表人体轮廓的 SVG 的简化版本：

 <path
         id="muscle1"
         style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
         d="M 5000,0 H 0 V 5000 H 5000 V 0" />

还有更多这样的。

在我的 Flutter 应用程序中，我想使用 SvgPicture 来显示此 SVG 图像，并且希望用户选择一块肌肉（由其唯一 ID 标识，例如“muscle1”）并选择一种颜色来填充该特定肌肉。

我已经考虑过使用 SvgPicture.string 方法并应用颜色滤镜，但我不确定对 SVG 的特定部分进行动态着色的最佳方法。

有人可以提供有关如何使用 flutter_svg 包在 Flutter 中实现此目的的指导吗？根据用户输入对人体轮廓 SVG 中的特定肌肉进行动态着色的推荐方法是什么？

感谢您的协助！

---

Answer 1

只需修改 SVG 文件的内容

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_svg/flutter_svg.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  MyHomePageState createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  Color _color = Colors.red;
  String svgContent = '';

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

  Future<void> loadSvgFromAsset() async {
    String svgAssetPath = 'assets/images/winter_city.svg';

    // Read SVG content from asset file
    String rawSvgContent = await rootBundle.loadString(svgAssetPath);

    // Modify SVG content
    String modifiedSvgContent = modifySvgContent(rawSvgContent);

    // Display the new file
    setState(() {
      svgContent = modifiedSvgContent;
    });
  }

  String modifySvgContent(String rawSvgContent) {
    final int abc = Random().nextInt(5);
    switch (abc) {
      case 0:
        _color = Colors.red;
        break;
      case 1:
        _color = Colors.orange;
        break;
      case 2:
        _color = Colors.yellow;
        break;
      case 3:
        _color = Colors.green;
        break;
      case 4:
        _color = Colors.blue;
        break;
    }
    rawSvgContent = rawSvgContent.replaceAll('fill="#86F5FE"',
        'fill="#${_color.value.toRadixString(16).substring(2)}"');
    return rawSvgContent;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('SVG Modification Example'),
      ),
      body: Center(
        child: svgContent.isEmpty
            ? const CircularProgressIndicator()
            : SvgPicture.string(svgContent),
      ),
    );
  }
}