全部：
当我尝试CSS转换时，一些关于缩放和翻译顺序的东西让我感到困惑：
<svg>
<rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;"/>
<rect x="0" y="0" width="20" height="30" style="stroke: #000000; fill:none;" transform="scale(2) translate(10, 10)"/>
</svg>
<svg>
<rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;"/>
<rect x="0" y="0" width="20" height="30" style="stroke: #000000; fill:none;" transform="translate(10, 10) scale(2)"/>
</svg>
这两者产生了不同的效果。有人能给我解释一下CSS转换是如何处理和呈现的吗？
感谢
来自W3C
x="当前用户坐标系中x轴坐标值较小的矩形边的x轴坐标。
和Mozilla开发者网络：
此属性表示用户坐标中的x轴坐标系统此坐标的确切效果取决于每个元素。
它们看起来不一样的原因是缩放元素也会缩放用户坐标系。
我又添加了两个SVG元素，这样我们就可以看到它只应用了第一个转换后的样子
<svg>
<rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;"/>
<rect x="0" y="0" width="20" height="30" style="stroke: #000000; fill:none;" transform="scale(2)"/>
</svg>
<svg>
<rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;"/>
<rect x="0" y="0" width="20" height="30" style="stroke: #000000; fill:none;" transform="scale(2) translate(10, 10)"/>
</svg>
<svg>
<rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;"/>
<rect x="0" y="0" width="20" height="30" style="stroke: #000000; fill:none;" transform="translate(10, 10)"/>
</svg>
<svg>
<rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;"/>
<rect x="0" y="0" width="20" height="30" style="stroke: #000000; fill:none;" transform="translate(10, 10) scale(2)"/>
</svg>在第一个中，首先应用比例。现在矩形和用户坐标系都是紫色矩形的2倍大。因此，当它移动到10，10时，它与紫色矩形的位置不同。
在第二种情况下，先移动rect。它与紫色矩形有相同的坐标系，所以它最终位于完全相同的位置。它是然后缩放的，所以它的左上角保持在同一位置。
每个像scale、translate这样的变换函数都表示一个矩阵。矩阵连接/乘法是不可交换的。所以M1 x M2一定不等于M2 x M1。
例如，缩放矩阵(列主要顺序)、缩放(2，2)：
m11=2.000 m21=0.000 m31=0.000
m12=0.000 m22=2.000 m32=0.000
m13=0.000 m23=0.000 m33=1.000
例如，转换矩阵，translate(10，10):
m11=1.000 m21=0.000 m31=10.000
m12=0.000 m22=1.000 m32=10.000
m13=0.000 m23=0.000 m33=1.000
缩放*转换：
m11=2.000 m21=0.000 m31=20.000
m12=0.000 m22=2.000 m32=20.000
m13=0.000 m23=0.000 m33=1.000
翻译*比例：
m11=2.000 m21=0.000 m31=10.000
m12=0.000 m22=2.000 m32=10.000
m13=0.000 m23=0.000 m33=1.000