將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 C頌

<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

你可能使用EllipseGeometries更好地使用Path元素。與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> 

結果是這樣的：