Flutter Web在iOS Safari及Android Firefox中Color Filter失效求助

方案一：修改SVG文件使用currentColor（推荐） #

这是最可靠的解决方式，直接让SVG继承父级颜色，绕过浏览器对ColorFilter的支持问题：

1. 打开你的assets/icon.svg文件，找到所有带有填充色的元素（比如<path>、<rect>）
2. 将原本的fill属性值替换为currentColor，例如：

<!-- 修改前 -->
<path fill="#333333" d="M10 10..." />

<!-- 修改后 -->
<path fill="currentColor" d="M10 10..." />

3. 调整Dart代码，直接通过color参数传递颜色（flutter_svg会自动将该颜色应用到使用currentColor的SVG元素）：

static Widget icon({double? width, double? height, Color? color}) {
  return SvgPicture.asset(
    'assets/icon.svg',
    width: width,
    height: height,
    color: color, // 直接设置颜色，无需colorFilter
  );
}

方案二：用CSS滤镜模拟ColorFilter（无需修改SVG） #

如果无法修改SVG文件，可以针对Web平台生成等效的CSS滤镜，替代Flutter的ColorFilter：

1. 实现一个颜色转CSS滤镜的工具函数：

String _colorToCssFilter(Color color) {
  final r = color.red / 255;
  final g = color.green / 255;
  final b = color.blue / 255;

  // 计算CSS滤镜参数，模拟srcIn混合模式的效果
  final invert = 1 - r;
  final hueRotate = ((r - g) * 120 + (g - b) * 60) % 360;
  final brightness = (r + g + b) / 3;

  return 'filter: invert(${invert * 100}%) sepia(100%) saturate(5000%) hue-rotate(${hueRotate}deg) brightness(${brightness * 100}%) contrast(100%);';
}

2. 在Web平台使用HtmlElementView加载SVG并应用滤镜，非Web平台保留原逻辑：

import 'dart:html' as html;
import 'dart:ui' as ui;
import 'package:flutter/foundation.dart';

static Widget icon({double? width, double? height, Color? color}) {
  if (kIsWeb) {
    final svgImg = html.ImageElement()
      ..src = 'assets/icon.svg'
      ..style.width = width != null ? '${width}px' : 'auto'
      ..style.height = height != null ? '${height}px' : 'auto';

    if (color != null) {
      svgImg.style.cssText += _colorToCssFilter(color);
    }

    // 注册唯一的视图类型
    final viewType = 'custom-svg-icon-${color?.value ?? 0}';
    ui.platformViewRegistry.registerViewFactory(
      viewType,
      (id) => svgImg,
    );

    return HtmlElementView(viewType: viewType);
  } else {
    return SvgPicture.asset(
      'assets/icon.svg',
      width: width,
      height: height,
      colorFilter: color != null ? ColorFilter.mode(color, BlendMode.srcIn) : null,
    );
  }
}

方案三：切换到CanvasKit渲染模式 #

Flutter Web的CanvasKit渲染模式基于Skia，对图形特性的支持更完整，能直接兼容ColorFilter，但会增加包体积：
在项目的web/index.html中添加以下代码，强制启用CanvasKit：

<script>
  // 放在加载main.dart.js的代码之前
  window.flutterWebRenderer = "canvaskit";
</script>

内容的提问来源于stack exchange，提问作者Mahsein