flutter_svg 2.0.0+1版本着色方法及colorFilter使用咨询

一、给SVG设置常规纯色填充（替代旧color属性） #

升级后要实现和原来color属性完全一致的纯色填充效果，直接使用colorFilter搭配BlendMode.srcIn即可，代码示例：

原来的写法（已废弃）：

SvgPicture.asset(
  'assets/icon.svg',
  color: Colors.blue,
)

新的替代写法：

SvgPicture.asset(
  'assets/icon.svg',
  colorFilter: ColorFilter.mode(Colors.blue, BlendMode.srcIn),
)

BlendMode.srcIn的作用是保留SVG原始图形的透明度（形状轮廓），用指定颜色填充所有非透明区域，和旧color的渲染逻辑完全匹配。

二、colorFilter的正确工作机制 #

colorFilter是通过**混合模式（BlendMode）**定义设置的颜色与SVG原始图形的像素叠加规则的，不同混合模式会产生完全不同的渲染效果：

• srcIn：只保留原始SVG的Alpha通道（即形状），用设置的颜色填充所有非透明区域，是旧color属性的等价替代方案
• srcATop：与srcIn类似，但SVG的透明区域会显示父组件的背景色
• multiply：将设置的颜色与SVG原始颜色相乘，整体色调偏暗，适合深色叠加效果
• overlay：根据SVG原始颜色深浅自动切换逻辑，浅色区域做滤色、深色区域做正片叠底，增强图形对比度
• color：直接用设置的颜色覆盖SVG所有像素（包括透明区域），会丢失原始形状的透明度信息

简单来说，colorFilter的核心是通过不同混合规则，让设置的颜色和SVG原始像素进行运算，得到最终渲染结果。选对BlendMode就能实现从纯色填充到复杂颜色叠加的各种效果。

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