咨询如何将指定XAML路径转换为SVG格式

问题描述 #

我有一段XAML路径代码，想转换成SVG格式，请问有可行的转换方法吗？

对应的XAML代码：

<Path Stroke="{DynamicResource ForegroundColorBrush}" Canvas.Right="0" Width="186" Height="216" Stretch="Fill" StrokeThickness="3" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 184.69,166.333L 173.338,166.333L 173.338,80.8143L 153.122,15.4178L 153.122,5.35669C 152.785,4.01523 152.448,2.67374 140.823,2.00302C 129.199,1.33228 106.287,1.33228 94.6631,2.00302C 83.0388,2.67374 82.7018,4.01523 82.3649,5.35669L 82.3649,15.4178L 62.1486,80.8143L 62.1486,166.333L 1.49997,166.333L 1.49997,206.577L 62.1486,206.577L 62.1486,211.607C 65.1811,212.613 68.2135,213.62 85.2288,214.123C 102.244,214.626 133.242,214.626 150.258,214.123C 167.273,213.62 170.305,212.613 173.338,211.607L 173.338,206.577L 184.7,206.5" RenderTransformOrigin="0.5,0.5">
    <Path.RenderTransform>
        <ScaleTransform ScaleY="1" ScaleX="-1"/>
    </Path.RenderTransform>
</Path>

可行的转换方法 #

方法一：手动转换（精准控制） #

手动转换需要对应XAML和SVG的属性、路径规则，步骤如下：

1. 处理路径数据：XAML的Data属性开头的F1是WPF专属格式标识，SVG不需要，直接去掉；其余路径指令（M、L、C）和SVG兼容，直接保留。
2. 映射绘制属性：
   • XAML的Stroke对应SVG的stroke，原XAML用了动态资源，可替换为具体颜色（比如currentColor或#000000）
   • StrokeThickness对应SVG的stroke-width
   • StrokeStartLineCap/StrokeEndLineCap对应SVG的stroke-linecap="round"
   • StrokeLineJoin对应SVG的stroke-linejoin="round"
   • Width/Height对应SVG的width/height
3. 处理变换：XAML中的ScaleTransform ScaleX="-1"是水平翻转，SVG可以用transform="scale(-1, 1)"，同时结合transform-origin="50% 50%"对应原RenderTransformOrigin="0.5,0.5"
4. 设置视图框：添加viewBox确保缩放正确，值为0 0 186 216（对应原Width和Height）

按照上述步骤，转换后的SVG代码如下：

<svg width="186" height="216" viewBox="0 0 186 216" xmlns="http://www.w3.org/2000/svg">
  <path 
    d="M 184.69,166.333L 173.338,166.333L 173.338,80.8143L 153.122,15.4178L 153.122,5.35669C 152.785,4.01523 152.448,2.67374 140.823,2.00302C 129.199,1.33228 106.287,1.33228 94.6631,2.00302C 83.0388,2.67374 82.7018,4.01523 82.3649,5.35669L 82.3649,15.4178L 62.1486,80.8143L 62.1486,166.333L 1.49997,166.333L 1.49997,206.577L 62.1486,206.577L 62.1486,211.607C 65.1811,212.613 68.2135,213.62 85.2288,214.123C 102.244,214.626 133.242,214.626 150.258,214.123C 167.273,213.62 170.305,212.613 173.338,211.607L 173.338,206.577L 184.7,206.5"
    stroke="#000000"
    stroke-width="3"
    stroke-linecap="round"
    stroke-linejoin="round"
    fill="none"
    transform="scale(-1, 1)"
    transform-origin="50% 50%"
  />
</svg>

注：原XAML的Stretch="Fill"在SVG中通过viewBox和width/height的配合已经实现，无需额外设置；fill设为none因为原XAML是描边路径，无填充。

方法二：工具转换（高效快捷） #

如果不想手动处理，可以用以下类型的工具：

• 本地桌面工具：比如Adobe Illustrator，直接导入XAML文件（或复制XAML代码粘贴到AI），再导出为SVG格式；Sketch等矢量工具也支持类似操作。
• 离线转换脚本：用C#编写简单脚本，利用WPF的Geometry类解析路径数据，再输出为SVG格式；或者用Python的svgwrite库来转换路径指令。

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