SVG 旋转（矩阵）矩形的宽度。看起来像宽度和高度数字被缩放答案

【问题标题】：SVG Width of a rotated (matrix) rectangle. Looks like width and height numbers are scaledSVG 旋转（矩阵）矩形的宽度。看起来像宽度和高度数字被缩放
【发布时间】：2018-04-30 06:54:15
【问题描述】：

我正在尝试分析从 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 度的水平和垂直像素，但即使那样它也应该是相同的数字。

这让我觉得这些值以某种非统一的方式缩放，但我无法想象我应该如何根据这些信息计算正确的宽度和高度。

【问题讨论】：

标签： svg

【解决方案1】：

对于他们考虑优化的内容，图形编辑器有时会采用相当模糊的算法。 CorelDraw 在这里所做的是将正方形替换为不同位置的矩形，并且边长不相等 44.6985 × 40.9736，然后应用一个矩阵，该矩阵不仅可以旋转和平移矩形，还可以不均匀地将其缩放回 40 × 40 平方。为什么？询问 Corel。

他们使用的矩阵是

matrix(0.881289 -0.155395 0.169522 0.961407 11.5017 22.5159)

并且等价于（使用此online tool 计算并四舍五入）

translate(11.5017 22.5159) rotate(-10) scale(0.894884 0.976238)

正方形围绕同一中心旋转（逆时针！）将被写为

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)

您可能会将此与Inkscape 写入相同旋转的方式进行对比。它清楚地写出旋转，但将原点移动到其他地方：

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

【讨论】：