Maui .NET 8 ANDROID 修改 SVG 图像部分的颜色

Question

我正在开发 .NET 8 MAUI 项目，遇到了以下问题。该应用程序有不同类型的用户，并且根据用户，它会在运行时更改其主要颜色。这是为了使应用程序在视觉上对于每种类型的用户来说都是不同的。

应用程序中使用的 SVG 图像会出现问题，其中包含显示原色的部分。例如，一个人的图像中的衬衫可能是原色的。正如我之前提到的，此部分应根据用户改变颜色。

在MAUI中，对于Android平台，我理解图像是以PNG格式处理的。我通过将图像存储在 Resources -> Raw 文件夹中并将其“构建操作”设置为 MauiAsset，设法将图像保留为 SVG 格式。

我尝试使用的更改颜色的方法是通过 SkiaSharp，这似乎是我发现的最简单的选项。然而，它并没有按预期工作。

我可以提供的代码是：

private async void LoadAndModifySvg()
{
    // Path to the original SVG file
    string originalSvgFileName = "man_and_car.svg";

    // Read SVG content
    string svgContent = await ReadSvgFileAsync(originalSvgFileName);

    // Replace the color #F27B13 with #0000FF
    svgContent = Regex.Replace(svgContent, @"#F27B13", "#0000FF", RegexOptions.IgnoreCase);

    // Load the SVG content into SKSvg
    _svg = new SkiaSharp.Extended.Svg.SKSvg();

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

    // Update the view
    CanvasView.InvalidateSurface();
}

private void CanvasView_PaintSurface(object sender, SKPaintSurfaceEventArgs e)
{
    if (_svg == null)
        return;

    var canvas = e.Surface.Canvas;
    canvas.Clear(SKColors.White);

    // Adjust the size and position of the SVG on the canvas
    var scale = Math.Min(e.Info.Width / _svg.Picture.CullRect.Width,
                         e.Info.Height / _svg.Picture.CullRect.Height);
    canvas.Scale((float)scale);

    // Draw the SVG
    canvas.DrawPicture(_svg.Picture);
}

// Method to read the SVG file as text
private async Task<string> ReadSvgFileAsync(string fileName)
{
    using (var stream = await FileSystem.OpenAppPackageFileAsync(fileName))
    using (var reader = new StreamReader(stream))
    {
        return await reader.ReadToEndAsync();
    }
}

从XAML方面，我有：

    <skia:SKCanvasView x:Name="CanvasView" PaintSurface="CanvasView_PaintSurface" 
                       HeightRequest="450"
                       AbsoluteLayout.LayoutBounds="1.1,1"
                        AbsoluteLayout.LayoutFlags="PositionProportional"
                       ZIndex="0"/>

如果有人能帮助我，我将不胜感激。目标是修改 MAUI .NET 8 中 SVG 图像特定部分的颜色。谢谢。

Answer 1

我目前最喜欢的解决此问题的方法是投资于Path和Path标记语法。您看到的内容与 SVG 路径语法密切相关。

例如：

<Path Stroke="Black"
      Data="M13.908992,16.207977 L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983Z" />

这样做，您可以快速想出在运行时缩放和重新着色的矢量图形。

我在这个 StackOverflow 答案中详细解释了这一点：https://stackoverflow.com/a/77429861/881441