Extracting SVG data into XAML

Question

I'm trying to extract SVG data and display it on a WPF form for a project I am working on. The problem is that I can't get the XAML to display the same way that the SVG does

SVG Image

SVG Code

<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 Image

XAML Code

<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>

What I'm doing:

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

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

I am not sure why they are displaying very differently when all the values (in my head) seem to make sense

How do you *extract data*? You can use Inkscape to convert svg into microsoft xaml. See [this](http://stackoverflow.com/q/3526366/1997232) also. — Sinatr, Feb 26 '16 at 11:28
@Sinatr Extracting the XML from the SVG using Linq then picking out the values one by one. Just used a XAML example because it's easier to show what's going on — Ralt, Feb 27 '16 at 13:46

Clemens · Accepted Answer · 2016-02-26T11:28:00.983

You might better use Path elements with EllipseGeometries. The advantage compared to Ellipse elements is that you can explicitly specify the Center, RadiusX and RadiusY properties.

Now you could use the exact values from your 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>

The result is this:

Thanks, this is exactly what I needed – Ralt Feb 26 '16 at 11:29 — Ralt, Feb 26 '16 at 11:29

Extracting SVG data into XAML

1 Answers1