UWP中使用SvgImageSource加载SVG时图片无法居中

布局实现 #

我在Grid中通过以下XAML布局实现图片居中：

<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Background="White">
    <Image Stretch="Uniform" VerticalAlignment="Center" HorizontalAlignment="Center" x:Name="capturedPhoto" Height="{x:Bind Path=CrosshairHeight, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Width="{x:Bind Path=CrosshairWidth, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
</StackPanel>

后台加载代码 #

在.cs文件中通过以下代码设置图片源：

ImageProperties imageProperties = await crosshairFile.Properties.GetImagePropertiesAsync();
using (IRandomAccessStream fileStream = await crosshairFile.OpenAsync(Windows.Storage.FileAccessMode.Read))
{
    if (crosshairFile.ContentType == "image/svg+xml")
    {
        SvgImageSource svgImage = new SvgImageSource();
        svgImage.RasterizePixelHeight = imageProperties.Height;
        svgImage.RasterizePixelWidth = imageProperties.Width;
        await svgImage.SetSourceAsync(fileStream);
        capturedPhoto.Source = svgImage;
    }
    else
    {
        BitmapImage bitmapImage = new BitmapImage();
        bitmapImage.DecodePixelHeight = 100;
        bitmapImage.DecodePixelWidth = 100;

        await bitmapImage.SetSourceAsync(fileStream);
        capturedPhoto.Source = bitmapImage;
    }
}

问题现象 #

使用BitmapImage加载PNG图片时，图片可以正常居中；但使用SvgImageSource加载SVG图片时，图片无法居中。已将StackPanel背景设为白色以便查看，效果如下：

涉及的SVG文件内容 #

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300" style="overflow: hidden; display: block;"><defs></defs><g id="two-0" transform="matrix(1 0 0 1 0 0)" opacity="1"><path transform="matrix(1 0 0 1 150 80)" id="two-106" d="M -5 -25 L 5 -25 L 5 25 L -5 25 Z " fill="#00FF4C" stroke="#000" stroke-width="1" stroke-opacity="1" fill-opacity="1" visibility="visible" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4"></path><path transform="matrix(1 0 0 1 150 220)" id="two-107" d="M -5 -25 L 5 -25 L 5 25 L -5 25 Z " fill="#00FF4C" stroke="#000" stroke-width="1" stroke-opacity="1" fill-opacity="1" visibility="visible" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4"></path><path transform="matrix(1 0 0 1 80 150)" id="two-108" d="M -25 -5 L 25 -5 L 25 5 L -25 5 Z " fill="#00FF4C" stroke="#000" stroke-width="1" stroke-opacity="1" fill-opacity="1" visibility="visible" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4"></path><path transform="matrix(1 0 0 1 220 150)" id="two-109" d="M -25 -5 L 25 -5 L 25 5 L -25 5 Z " fill="#00FF4C" stroke="#000" stroke-width="1" stroke-opacity="1" fill-opacity="1" visibility="visible" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4"></path><path transform="matrix(1 0 0 1 150 150)" id="two-110" d="M 10 0 C 10 2.111792 9.33145 4.169376 8.090169 5.877852 C 6.848889 7.586328 5.098603 8.857985 3.090169 9.510565 C 1.081735 10.163144 -1.081736 10.163144 -3.09017 9.510565 C -5.098604 8.857985 -6.84889 7.586328 -8.09017 5.877852 C -9.331451 4.169376 -10 2.111792 -10 0 C -10 -2.111793 -9.331451 -4.169377 -8.09017 -5.877853 C -6.84889 -7.586329 -5.098604 -8.857986 -3.09017 -9.510566 C -1.081736 -10.163145 1.081735 -10.163145 3.090169 -9.510566 C 5.098603 -8.857986 6.848889 -7.586329 8.090169 -5.877853 C 9.33145 -4.169377 10 -2.111793 10 0 Z " fill="#00FF4C" stroke="#000" stroke-width="1" stroke-opacity="1" fill-opacity="1" visibility="visible" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4"></path></g></svg>

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