.NET 8 MAUI中SKCanvasView显示SVG仅一角，需缩放吗？怎么实现？

是的，你需要对SVG进行缩放适配——因为你的SVG原始尺寸是75x75，而SKCanvasView的实际显示区域远大于这个尺寸，直接绘制只会按原大小渲染，所以只露出左上角一小块。

下面是具体的实现方案：

核心思路 #

• 计算等比例缩放系数：以SKCanvasView的宽高为基准，算出能让SVG完整显示且不变形的缩放比例
• 调整画布变换：通过缩放和位移，让SVG居中填满（或适配）SKCanvasView的区域
• 优化渲染性能：把SVG加载逻辑移出OnPaintSurface，避免每次重绘都重复加载

修改后的完整代码 #

// 把SVG加载移到初始化逻辑里，避免重复加载
private SKSvg _svg = new SKSvg();
private SKPicture _svgPicture;

protected override void OnHandlerChanged()
{
    base.OnHandlerChanged();
    // 仅在控件初始化时加载一次SVG
    if (_svgPicture == null)
    {
        byte[] bytes = Encoding.UTF8.GetBytes(SVGFlags.lgbt_1);
        using var stream = new MemoryStream(bytes);
        _svg.Load(stream);
        _svgPicture = _svg.Picture;
    }
}

protected override void OnPaintSurface(SKPaintSurfaceEventArgs e)
{
    var info = e.Info;
    var canvas = e.Surface.Canvas;
    canvas.Clear();

    if (_svgPicture == null) return;

    // 1. 获取SVG原始尺寸和画布尺寸
    float svgWidth = _svgPicture.Width;
    float svgHeight = _svgPicture.Height;
    float canvasWidth = info.Width;
    float canvasHeight = info.Height;

    // 2. 计算等比例缩放系数（取宽高比例中的较小值，保证SVG完整显示）
    float scaleX = canvasWidth / svgWidth;
    float scaleY = canvasHeight / svgHeight;
    float scale = Math.Min(scaleX, scaleY);

    // 3. 计算居中偏移量（可选，让SVG在画布中居中）
    float offsetX = (canvasWidth - svgWidth * scale) / 2;
    float offsetY = (canvasHeight - svgHeight * scale) / 2;

    // 4. 应用变换：先平移到居中位置，再缩放
    canvas.Translate(offsetX, offsetY);
    canvas.Scale(scale);

    // 5. 绘制SVG
    canvas.DrawPicture(_svgPicture);
}

关键说明 #

• 等比例缩放：用Math.Min(scaleX, scaleY)保证SVG不会被拉伸，完整适配画布的最小边
• 居中显示：通过Translate调整位置，让SVG在画布中居中，如果你不需要居中，可以去掉这一步
• 性能优化：把SVG加载移到OnHandlerChanged里，只加载一次，避免每次重绘都重复解析SVG字符串和流

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