Convert SVG to Path-CodePudding

I have the following SVG and I am trying to convert it to Path

<svg
    xmlns="http://www.w3.org/2000/svg" width="32" height="32">
    <g fill="none" stroke="#373748" stroke-linecap="round" stroke-linejoin="round" transform="translate(-201 -1495.362)">
        <circle style="isolation:auto;mix-blend-mode:normal" cx="217" cy="1511.362" r="15.5" color="#000" overflow="visible"/>
        <path d="m217.002 1501.846-.002 9.516m7.613 0h-7.598m-.015 13.493v-2m-13.493-11.493h2m11.502-13.487v2m13.487 11.503h-2m-23.174 6.733 1.732-1m3.207-17.432 1 1.732m17.431 3.218-1.732 1m-3.218 17.431-1-1.732m-17.418-16.702 1.732 1m16.7-5.939-1 1.732m5.929 16.705-1.733-1m-16.704 5.929 1-1.732"/>
    </g>
</svg>

And I converted it that way

<Style x:Key="ClockIconStyle" TargetType="Path" BasedOn="{StaticResource Base30X30IconStyle}">
    <Setter Property="Data" Value="m217.002 1501.846-.002 9.516m7.613 0h-7.598m-.015 13.493v-2m-13.493-11.493h2m11.502-13.487v2m13.487 11.503h-2m-23.174 6.733 1.732-1m3.207-17.432 1 1.732m17.431 3.218-1.732 1m-3.218 17.431-1-1.732m-17.418-16.702 1.732 1m16.7-5.939-1 1.732m5.929 16.705-1.733-1m-16.704 5.929 1-1.732"/>
    <Setter Property="Stroke" Value="White"/>
    <Setter Property="EllipseGeometry.Center" Value="217, 1511.362"/>
    <Setter Property="EllipseGeometry.RadiusX" Value="15.5"/>
    <Setter Property="EllipseGeometry.RadiusY" Value="15.5"/>
</Style>

The problem is that I don't really know how to convert the circle of the SVG

The real picture

enter image description here

And the image I get from the conversion
enter image description here

Would appreciate help

CodePudding user response：

You should create a GeometryGroup with an EllipseGeometry and a PathGeometry and show it in a Path element.

With Stretch set to Fill (or Uniform) the geometry stretches to the desired size of the Path element.

<Window.Resources>
    <GeometryGroup x:Key="myGeometry">
        <EllipseGeometry Center="217,1511.362" RadiusX="15.5" RadiusY="15.5"/>
        <PathGeometry Figures="m217.002 1501.846-.002 9.516m7.613 0h-7.598m-.015 13.493v-2m-13.493-11.493h2m11.502-13.487v2m13.487 11.503h-2m-23.174 6.733 1.732-1m3.207-17.432 1 1.732m17.431 3.218-1.732 1m-3.218 17.431-1-1.732m-17.418-16.702 1.732 1m16.7-5.939-1 1.732m5.929 16.705-1.733-1m-16.704 5.929 1-1.732" />
    </GeometryGroup>
</Window.Resources>
<Canvas Background="White">
    <Path Width="100" Height="100" Stretch="Fill"
          Stroke="Black" StrokeThickness="3"
          StrokeStartLineCap="Round" StrokeEndLineCap="Round"
          Data="{StaticResource myGeometry}"/>
</Canvas>