为何WPF Path与SVG中同一路径显示效果存在差异？

问题场景 #

在WPF中使用以下路径代码绘制了一个排序图标：

<Path x:Name="SortIcon" Fill="Black" Width="8" Data="M -5.215,6.099L 5.215,6.099L 0,0L -5.215,6.099 Z" />

该代码会显示一个向下指向的实心三角形。

但将相同的路径数据复制到SVG中时，显示效果完全不同：

<svg height="8" width="8">
   <path d="M -5.215,6.099L 5.215,6.099L 0,0L -5.215,6.099 Z" />
</svg>

SVG显示的是不完整或视觉方向相反的图形，本质是两者的渲染规则存在核心差异。

核心原因 #

1. 可视区域与坐标对齐逻辑不同 #

• WPF的Path控件会自动识别路径的完整边界范围（x从-5.215到5.215，y从0到6.099），并将整个路径居中平移到Width=8的容器内，确保图形完整显示。
• SVG默认以(0,0)作为可视区域的左上角，路径中的负坐标部分（x<-5.215）会直接被裁剪出可视范围，导致图形缺失。

2. 图形拉伸适配规则不同 #

• WPF的Path默认使用Stretch="Fill"模式，会自动缩放路径以填满指定的容器宽高，原路径的宽高比会被适配到Width=8的容器中，保证图形比例正确且充满容器。
• 你的SVG代码未设置viewBox属性，路径会以原始坐标大小渲染，不会自动缩放适配svg元素的宽高，导致图形比例失调且部分区域被裁剪。

3. 绘制属性的默认值差异 #

• WPF的Path明确设置了Fill="Black"，渲染的是实心填充图形；而SVG中的path未设置fill属性，默认仅渲染描边（甚至可能因未设置stroke而显示不完整），这也加剧了视觉效果的差异。

让SVG与WPF显示一致的修正代码 #

如果需要SVG达到和WPF完全一致的效果，调整代码如下：

<svg width="8" height="8" viewBox="-5.215 0 10.43 6.099">
  <path d="M -5.215,6.099L 5.215,6.099L 0,0L -5.215,6.099 Z" fill="black" />
</svg>

• viewBox="-5.215 0 10.43 6.099"：定义包含路径所有坐标的可视区域，确保图形完整。
• fill="black"：和WPF一致设置实心填充。
• SVG会自动将viewBox的内容缩放适配到width="8"和height="8"的容器中，实现和WPF相同的拉伸效果。

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