奇怪的 XAML RenderTransform 行为 (SVG)

Question

我有一个使用 Inkscape 转换为 XAML 的 svg 文件，但出了点问题。这是我的期望：

这就是我得到的：

有任何想法吗？

SVG文件：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1920" height="1080">
<rect x="51" y="37" width="198" height="99" id="rect1" style="fill-opacity:0;stroke-width:1;stroke:rgb(0,0,0);fill:rgb(255,255,255)"  />
<rect x="111" y="178" width="216" height="125" id="rect2" style="fill-opacity:0;stroke-width:1;stroke:rgb(0,0,0);fill:rgb(255,255,255)"  />
<rect x="302" y="42" width="181" height="113" id="rect3" style="fill-opacity:0;stroke-width:1;stroke:rgb(0,0,0);fill:rgb(255,255,255)"  />
<rect x="391" y="234" width="94" height="84" id="rect4" style="fill-opacity:0;stroke-width:1;stroke:rgb(0,0,0);fill:rgb(255,255,255)" transform="matrix(0.7071068,0.7071068,-0.7071068,0.7071068,323.4487,-228.8742)" />
</svg>

XAML 生成的文件：

<?xml version="1.0" encoding="UTF-8"?>
<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Stretch="Uniform">
  <Canvas Name="svg6" Width="1920" Height="1080">
    <Canvas.Resources/>
    <Rectangle xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Canvas.Left="51" Canvas.Top="37" Width="198" Height="99" Name="rect1" Fill="#00FFFFFF" StrokeThickness="1" Stroke="#000000"/>
    <Rectangle xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Canvas.Left="111" Canvas.Top="178" Width="216" Height="125" Name="rect2" Fill="#00FFFFFF" StrokeThickness="1" Stroke="#000000"/>
    <Rectangle xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Canvas.Left="302" Canvas.Top="42" Width="181" Height="113" Name="rect3" Fill="#00FFFFFF" StrokeThickness="1" Stroke="#000000"/>
    <Rectangle xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Canvas.Left="391" Canvas.Top="234" Width="94" Height="84" Name="rect4" Fill="#00FFFFFF" StrokeThickness="1" Stroke="#000000">
      <Rectangle.RenderTransform>
        <MatrixTransform Matrix="0.7071068 0.7071068 -0.7071068 0.7071068 323.4487 -228.8742"/>
      </Rectangle.RenderTransform>
    </Rectangle>
  </Canvas>
</Viewbox>

Answer 1

WPF/XAML 中的 MatrixTransform 与 SVG 中的工作方式略有不同。值以不同的顺序给出，并且变换是相对于当前位置的。有关WPF 矩阵变换的详细信息，请参阅此文章。

您从 SVG 复制了矩阵值，这不起作用。例如，您将形状向右移动 323 个单位，如果它位于 (0,0) 处，这将是有意义的。但是在这里您的形状已经放置在正确的位置，因此您无需进一步移动它。

在 SVG 中，值是逐列给出的（文档）。在 WPF 中，值是逐行给出的（文档）。

正确的矩阵变换可能如下所示（注意值的不同顺序和转换部分中的两个零）：

<Rectangle xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Canvas.Left="323.4487" Canvas.Top="228.8742" Width="94" Height="84" Name="rect4" Fill="#00FFFFFF" StrokeThickness="1" Stroke="#000000">
    <Rectangle.RenderTransform>
        <MatrixTransform Matrix="0.7071068 -0.7071068 0.7071068 0.7071068 0 0"/>
    </Rectangle.RenderTransform>
</Rectangle>