WPF中如何为DotNetProjects.SVGImage加载的灰度SVG设置自定义颜色

完全可以实现仅对SVG非透明区域应用自定义颜色，适配你当前的场景有两种可落地的方案：

优先方案：使用组件内置的重着色属性 #

你当前使用的DotNetProjects.SVGImage组件原生支持灰度SVG的重着色，不需要额外叠加颜色层，直接调用自带的TintColor属性即可：

• 该属性会完整保留SVG原有的透明度通道（包括半透明渐变、镂空边缘等效果），仅将原灰度的非透明区域替换为你指定的颜色，完全匹配你的需求
• 仅需在现有SVGImage节点上加一行属性配置即可，无需改动现有布局，示例：

<svg1:SVGImage 
    x:Name="StartingImage" 
    SizeType="SizeToContent"
    Source="/CustomBrushesExample;component/Images/test_3.svg" 
    Margin="20" 
    RenderTransformOrigin="0.5,0.5" 
    VerticalContentAlignment="Top" 
    HorizontalContentAlignment="Left" 
    HorizontalAlignment="Left" 
    VerticalAlignment="Top"
    TintColor="DodgerBlue" <!-- 可直接绑定动态颜色，后台修改StartingImage.TintColor即可实时变色 -->
/>

兼容方案：叠加颜色层实现 #

如果使用的SVGImage版本过低、没有TintColor属性，可以通过透明度蒙版的方式实现等效效果：

1. 底层放置一个尺寸与SVG渲染大小完全一致的纯色元素，填充为你需要的自定义颜色
2. 给整个容器设置OpacityMask，蒙版源直接使用你的SVG资源，利用SVG的透明度规则：非透明区域会透出底层的颜色，透明区域完全不显示
   示例代码：

<Grid Margin="20" Width="120" Height="120"> <!-- 尺寸与实际SVG渲染尺寸对齐即可 -->
    <!-- 底层自定义颜色层 -->
    <Rectangle x:Name="ColorLayer" Fill="DodgerBlue" />
    <!-- 用SVG做透明度蒙版，不渲染原灰度，仅取透明度信息 -->
    <Grid.OpacityMask>
        <ImageBrush ImageSource="/CustomBrushesExample;component/Images/test_3.svg" />
    </Grid.OpacityMask>
</Grid>

需要动态改色时，直接修改ColorLayer.Fill的颜色即可，不需要重新加载SVG资源。

注意：两种方案都不会修改原SVG文件，不需要对业务侧提供的共享SVG做任何改动，完全符合你跨端共用资源的要求。

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