旋转（矩阵）矩形的SVG宽度。看起来宽度和高度数字是按比例缩放的

我试图分析从coreldraw导出的SVG文件中的数据

它实际上是一个带有常规黑色40x40矩形的文件，同样的40x40矩形旋转了10度并用红色表示

如果我查看SVG内容，那么我可以很好地看到我的40x40黑色矩形，它下面的线是红色旋转的

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<!-- Creator: CorelDRAW Home & Student X7 -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100px" height="100px" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 100 100"
 xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <style type="text/css">
   <![CDATA[
    .str0 {stroke:black;stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round}
    .str1 {stroke:red;stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round}
    .fil0 {fill:none}
   ]]>
  </style>
 </defs>
 <g id="Layer_x0020_1">
  <metadata id="CorelCorpID_0Corel-Layer"/>
  <rect class="fil0 str0" x="15" y="19" width="40" height="40"/>
  <rect class="fil0 str1" transform="matrix(0.881289 -0.155395 0.169522 0.961407 11.5017 22.5159)" width="44.6985" height="40.9736"/>
 </g>
</svg>

但是

红色旋转的没有指定X或Y参数。我通读了一些文档，认为这意味着它们默认为0

黑色原始矩形和红色旋转版本的大小完全相同，但红色矩形旋转了10度

如果我看红色矩形的宽度和高度，我会看到宽度为44.6985，高度为40.9736，这对我来说毫无意义

它是一个矩形，所以它的高度和宽度应该完全相同。即使你旋转它。我也知道矩形将使用更多的水平和垂直像素旋转10度，但即使如此，它也应该是相同的数字

---

<>这使我认为这些值以某种非均匀的方式被缩放，但是我无法想象如何根据这个信息计算正确的宽度和高度。

< P>编辑有时对于他们所考虑的优化有很模糊的算法。CorelDraw在这里所做的是在不同的位置将正方形换成一个边长不相等的矩形44.6985×40.9736，然后应用一个矩阵，该矩阵不仅旋转和平移矩形，而且将其非均匀地缩放回40×40正方形。为什么？问问科雷尔

他们使用的矩阵是

matrix(0.881289 -0.155395 0.169522 0.961407 11.5017 22.5159)

和相当于使用此函数计算并取整一位

A逆时针方向！正方形围绕同一中心的旋转将写为

rotate(-10 33.3443 40.7508) //or
translate(-6.56971 6.40931) rotate(-10)

这相当于

matrix(0.984807 -0.173648 0.173648 0.984807 -6.56971 6.40931)

您可以将其与写入相同旋转的方式进行对比。它清晰地写出旋转，但将原点移动到其他位置：

<rect x="7.41712" y="24.1711" width="40" height="40" transform="rotate(-10)" />

<rect x="7.41712" y="24.1711" width="40" height="40" transform="rotate(-10)" />