奇怪的XAML RenderTransform行为（SVG）

Question

我有svg文件，我已经使用Inkscape转换为XAML，并且出了点问题。这就是我的期望：

这就是我得到的：

有什么想法吗？

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矩阵变换的详细信息，请参阅this article。

您从SVG复制了矩阵值，但这并不起作用。例如，你将你的形状向右移动323个单位，如果位于（0,0），这将是有意义的。但是你的形状已经摆放在正确的位置，所以你不需要进一步改变它。

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

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

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