将 SVG 数据提取到 XAML

Question

我正在尝试提取 SVG 数据并将其显示在我正在处理的项目的 WPF 表单上。问题是我无法让 XAML 以与 SVG 相同的方式显示

SVG 图像

SVG 代码

<ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 -11.7477 28.3614)"
         fill="#6DBE45"
         cx="28.4" cy="28.4"
         rx="32.5" ry="23.5"/>

<ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 4.1498 66.7412)"
         fill="#991B1E"
         cx="82.6" cy="28.4"
         rx="32.5" ry="23.5"/>

XAML 图像

XAML 代码

<Canvas>
  <Ellipse Width="65" Height="47" Fill="Green">
            <Ellipse.RenderTransform>
                <TransformGroup>
                    <MatrixTransform Matrix="0.7071 -0.7071 0.7071 0.7071 -11.7477 28.3614" />
                    <TranslateTransform X="28.4" Y="28.4"/>
                </TransformGroup>
            </Ellipse.RenderTransform>
  </Ellipse>
  <Ellipse Width="65" Height="47" Fill="Red">
            <Ellipse.RenderTransform>
                <TransformGroup>
                    <MatrixTransform Matrix="0.7071 -0.7071 0.7071 0.7071 4.1498 66.7412" />
                    <TranslateTransform X="82.6" Y="28.4"/>
                </TransformGroup>
            </Ellipse.RenderTransform>
  </Ellipse>
</Canvas>

我在做什么：

Height = ry (radiusY) * 2
Width = rx (radiusX) * 2

Matrix transform = transform values
Translate trasnform = cx (coordiante x), cy (coordiante y)

当所有值（在我脑海中）似乎都有意义时，我不确定为什么它们的显示方式非常不同

Answer 1

您可能会更好地将Path元素与 EllipseGeometries 结合使用。与Ellipse元素相比的优势在于您可以明确指定Center,RadiusX和RadiusY属性。

现在您可以使用 SVG 中的确切值：

<Canvas>
    <Path Fill="Green">
        <Path.Data>
            <EllipseGeometry
                Center="28.4 28.4"
                RadiusX="32.5" RadiusY="23.5"
                Transform="0.7071 -0.7071 0.7071 0.7071 -11.7477 28.3614"/>
        </Path.Data>
    </Path>
    <Path Fill="Red">
        <Path.Data>
            <EllipseGeometry
                Center="82.6 28.4"
                RadiusX="32.5" RadiusY="23.5"
                Transform="0.7071 -0.7071 0.7071 0.7071 4.1498 66.7412"/>
        </Path.Data>
    </Path>
</Canvas>

结果是这样的：