.NET 8 MAUI Android平台SVG指定区域颜色动态修改求助

原方案的核心局限 #

你的正则替换方案存在以下问题，导致效果不达预期：

• 匹配范围有限：仅能替换十六进制格式的#F27B13，无法覆盖RGB、HSL、CSS变量等其他颜色写法
• 无区域定位能力：如果多个SVG元素使用同一颜色，会被批量替换，无法精准修改指定区域（如人物上衣）
• 不支持样式类中的颜色：若颜色定义在<style>标签的CSS类里，正则替换无法生效

针对性优化方案 #

方案1：通过元素ID精准定位改色（推荐） #

先给SVG中需要修改的区域添加唯一id属性，比如给人物上衣路径加上id="person-jacket"：

<path id="person-jacket" fill="#F27B13" d="M123..."/>

然后通过SkiaSharp的回调拦截绘制操作，仅修改指定ID元素的颜色：

private async void LoadAndModifySvg()
{
    string originalSvgFileName = "man_and_car.svg";
    string svgContent = await ReadSvgFileAsync(originalSvgFileName);

    _svg = new SkiaSharp.Extended.Svg.SKSvg();
    using (var stream = new MemoryStream(System.Text.Encoding.UTF8.GetBytes(svgContent)))
    {
        _svg.Load(stream);
    }

    if (_svg.Picture != null)
    {
        var recorder = new SKPictureRecorder();
        using (var canvas = recorder.BeginRecording(_svg.Picture.CullRect))
        {
            // 传入目标颜色，拦截指定ID的元素绘制
            _svg.Picture.Draw(canvas, new TargetElementDrawCallback("#0000FF"));
        }
        _svg.Picture = recorder.EndRecording();
    }

    CanvasView.InvalidateSurface();
}

// 自定义回调类，用于修改指定ID元素的颜色
private class TargetElementDrawCallback : SKPictureDrawCallback
{
    private readonly SKColor _replacementColor;

    public TargetElementDrawCallback(string hexColor)
    {
        SKColor.TryParse(hexColor, out _replacementColor);
    }

    public override bool OnDraw(SKDrawingContext ctx)
    {
        // 匹配目标元素ID，替换绘制颜色
        if (ctx.CurrentId == "person-jacket")
        {
            ctx.Paint = new SKPaint(ctx.Paint) { Color = _replacementColor };
        }
        return base.OnDraw(ctx);
    }
}

方案2：改进正则替换（适用于简单SVG场景） #

如果你的SVG仅使用十六进制颜色，且目标颜色仅用于指定区域，可优化正则表达式以匹配所有十六进制写法：

// 精准匹配fill/stroke属性中的目标颜色，避免误替换其他内容
svgContent = Regex.Replace(svgContent, 
    @"(?<=fill|stroke)\s*=\s*[""']?(#?F27B13|#?f27b13)[""']?", 
    "=\"#0000FF\"", 
    RegexOptions.IgnoreCase);

方案3：CSS变量全局主题切换 #

若需要全局统一切换主色调，可先修改SVG使用CSS变量：

<style>
    :root { --primary-theme-color: #F27B13; }
    .jacket { fill: var(--primary-theme-color); }
</style>
<path class="jacket" d="M123..."/>

然后在代码中替换变量值：

svgContent = Regex.Replace(svgContent, 
    @"--primary-theme-color:\s*#\w+", 
    $"--primary-theme-color: #0000FF");

验证注意事项 #

• 确保SVG文件的Build Action设置为MauiAsset，避免编译时被转成位图
• 测试SkiaSharp.Extended.Svg版本与.NET 8 MAUI的兼容性
• 若SVG存在嵌套元素，需确保ID属性添加到最顶层的图形元素上

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