在 .NET Maui 中指定 SVG 图像的颜色

Question

.NET MAUI 能够使用 SVG 图像，这非常好，但我无法设置 SVG 图像的颜色。官方文档声明我可以在项目文件中使用 TintColor 但这不是一个好的解决方案，因为我希望能够根据某些条件使用不同的颜色。那么我们能以某种方式指定 SVG 图像的颜色吗？

Answer 1

我刚刚发现毛伊岛社区工具包有一个IconTintColorBehavior正是我想要的。

用法：

<Image Source="shield.png">
    <Image.Behaviors>
        <toolkit:IconTintColorBehavior TintColor="Red" />
    </Image.Behaviors>
</Image>

名称空间

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

Answer 2

也许你可以使用skiasharp。我举一些例子。

首先添加Nuget，如SkiaSharp.Views.Maui.Controls、SkiaSharp.Svg。

在xaml中，定义一个SKCanvasView。PaintSurface 事件处理程序是您进行所有绘图的地方。

<StackLayout>
    <skiact:SKCanvasView  WidthRequest="500" HeightRequest="500" x:Name="mycanvasview" PaintSurface="mycanvasview_PaintSurface">
    </skiact:SKCanvasView>
</StackLayout>

在 .cs 文件中，实现mycanvasview_PaintSurface方法。添加一些像这样的代码：

private void mycanvasview_PaintSurface(object sender, SkiaSharp.Views.Maui.SKPaintSurfaceEventArgs e)
{
    SKImageInfo info = e.Info;
    SKSurface surface = e.Surface;
    SKCanvas canvas = surface.Canvas;

    canvas.Clear();
    Stream stream = LoadStream(typeof(MainPage),"myfile.svg");
    SKSvg svg = new SKSvg();
    svg.Load(stream);

    using (var paint = new SKPaint())
    {
        paint.ColorFilter = SKColorFilter.CreateBlendMode(
            SKColors.Yellow,      
            SKBlendMode.SrcIn); 
        canvas.DrawPicture(svg.Picture ,paint);
    }
}


private static Stream LoadStream(Type type, string v)
{
    Assembly assembly = type.GetTypeInfo().Assembly;
    Stream stream = assembly.GetManifestResourceStream(v);
    return stream;
}

你的 svg 文件会改变颜色。

希望我的回答能够对您有所帮助。