为什么转换顺序很重要？旋转/缩放的结果与缩放/旋转的结果不同

Question

通过梳理后SVG规范和指南，如这个和这个，我仍然在努力理解究竟是如何链接转换工作。

精选相关报价

当将transform属性应用于SVG元素时，该元素将获得使用中的当前用户坐标系的“副本”。

和：

当转换链接在一起时，最重要的是要意识到，就像HTML元素转换一样，每个转换都将在坐标系被先前的转换转换后应用于坐标系。

和：

例如，如果要对元素应用旋转，然后进行平移，则平移将根据新的坐标系发生，而不是初始的非旋转坐标系。

和：

转换的顺序很重要。在transform属性中指定变换函数的顺序是将它们应用于形状的顺序。

码

先缩放第一个矩形的当前坐标系，然后旋转（注意顺序）。旋转第二个矩形的当前坐标系，然后缩放。

svg {

  border: 1px solid green;

}


<svg xmlns="html" target="_blank">http://www.w3.org/2000/svg">

  <style>

    rect#s1 {

      fill: red;

      transform: scale(2, 1) rotate(10deg);

    }

  </style>

  <rect id="s1" x="" y="" width="100" height="100" />

</svg>



<svg xmlns="http://www.w3.org/2000/svg">

  <style>

    rect#s2 {

      fill: blue;

      transform: rotate(10deg) scale(2, 1);

    }

  </style>

  <rect id="s2" x="" y="" width="100" height="100" />

</svg>

题

我们知道，当我们链接变换时，将复制该元素当前使用的坐标系，然后按指定的顺序应用变换。

当我们有一个已经缩放的用户坐标系并且对其应用旋转时，矩形（如图所示）有效地倾斜（注意更改的角度）。如果我们以相反的方式（旋转，然后缩放）进行两个变换，则不会发生这种情况。

我们将不胜感激地提供有关缩放电流坐标系确切旋转方式的专家帮助。我试图从技术（内部工作）的角度理解为什么偏斜发生在第一个矩形中。

谢谢。

Answer 1

为了说明其工作原理，让我们考虑一个动画，以显示缩放效果如何改变旋转。

.red {

  width:80px;

  height:20px;

  background:red;

  margin:80px;

  transform-origin:left center;

  animation: rotate 2s linear infinite;

}

@keyframes rotate {

  from{transform:rotate(0)}

  to{transform:rotate(360deg)}



}


<div class="container">

<div class="red">

</div>

</div>

正如您在上面看到的，旋转创建了一个完美的圆形。

现在让我们缩放容器并查看差异：

.red {

  width:80px;

  height:20px;

  background:red;

  margin:80px;

  transform-origin:left center;

  animation: rotate 5s linear infinite;

}

@keyframes rotate {

  from{transform:rotate(0)}

  to{transform:rotate(360deg)}



}

.container {

  display:inline-block;

  transform:scale(3,1);

  transform-origin:left center;

}


<div class="container">

<div class="red">

</div>

</div>

请注意，我们现在不再是圆形，而是椭圆。就像我们取了一个圆并固定了它，这在矩形内创建了偏斜效果。

如果我们做相反的效果，我们先从缩放效果开始，然后应用旋转，则不会有任何倾斜。

.red {

  width:80px;

  height:20px;

  background:red;

  margin:80px;

  animation: rotate 2s linear infinite;

}

@keyframes rotate {

  from{transform:scale(1,1)}

  to{transform:scale(3,1)}



}

.container {

  display:inline-block;

  transform:rotate(30deg);

  transform-origin:left center;

}


<div class="container">

<div class="red">

</div>

</div>

用不同的方式来解释：施加旋转将使X和Y轴之间的比率保持相同，因此以后进行缩放时不会看到任何不良影响，但是仅缩放一个轴会破坏该比率，因此，当我们尝试时，我们的形状看起来很糟糕进行旋转。

以下是相关部分：

转换是累积的。也就是说，元素在其父级坐标系内建立其局部坐标系。

从用户的角度来看，元素有效地累积了其祖先的所有变换属性以及应用于该元素的任何局部变换

让我们做一些数学运算，以了解两个转换之间的差异。让我们考虑矩阵乘法和因为我们面对的是一个二维线性变换，我们将做到这一点上ℝ²为简单起见 1 。

因为scale(2, 1) rotate(10deg)我们将有

 |2 0|   |cos(10deg) -sin(10deg)|   |2*cos(10deg) -2*sin(10deg) |
 |0 1| x |sin(10deg) cos(10deg) | = |1*sin(10deg) 1*cos(10deg)  |

现在，如果我们将此矩阵应用于，(Xi,Yi)我们将获得(Xf,Yf)如下所示：

 Xf = 2* (Xi*cos(10deg) - Yi*sin(10deg))
 Yf =     Xi*sin(10deg) + Yi*cos(10deg)

请注意，它Xf是如何具有一个额外的乘数的，这是造成偏斜效果的元凶。就像我们更改了行为或Xf保留了Yf

现在让我们考虑rotate(10deg) scale(2, 1)：

 |cos(10deg) -sin(10deg)|   |2 0|   |2*cos(10deg) -1*sin(10deg) |
 |sin(10deg) cos(10deg) | x |0 1| = |2*sin(10deg) 1*cos(10deg)  |

然后我们将有

 Xf =  2*Xi*cos(10deg) - Yi*sin(10deg)
 Yf =  2*Xi*sin(10deg) + Yi*cos(10deg)

我们可以将其2*Xi视为an Xt，并且可以说我们旋转了（Xt,Yi）元素，并且此元素最初是考虑X轴缩放的。

1 CSS还使用仿射变换（例如平移），因此使用ℝ²（笛卡尔坐标）不足以执行我们的计算，因此我们需要考虑ℝℙ²（同质坐标）。我们之前的计算将是：

 |2 0 0|   |cos(10deg) -sin(10deg) 0|   |2*cos(10deg) -2*sin(10deg) 0|
 |0 1 0| x |sin(10deg) cos(10deg)  0| = |1*sin(10deg) 1*cos(10deg)  0|
 |0 0 1|   |0          0           1|   |0            0             1|

在这种情况下，什么都不会改变，因为仿射部分为 空， 但是如果我们将翻译与其他转换结合在一起（例如：），scale(2, 1) translate(10px,20px)我们将具有以下优势：

 |2 0 0|   |1 0 10px|   |2 0 20px|
 |0 1 0| x |0 1 20px| = |0 1 20px|
 |0 0 1|   |0 0 1   |   |0 0  1  |

和

Xf =  2*Xi + 20px;
Yf =  Yi + 20px;
1  =  1 (to complete the multiplication)