SVG 变换的顺序如何影响最终的形状扭曲？

变换顺序和产生的扭曲

在 SVG 中，当将变换属性应用于元素时，它会获取当前用户坐标系。然后按顺序应用后续变换，每次都会从之前的状态修改坐标系。

这种变换顺序会显着影响最终输出。如指定引号中所述：

• 变换按照它们在变换属性中出现的顺序应用。
• 每个变换都会根据先前变换所应用的更改影响坐标系。

由于变换而倾斜序列

考虑提供的代码中的示例，其中两个矩形进行变换：

矩形 1: 缩放(2, 1) 然后旋转(10deg)
矩形2：旋转（10deg）然后Scale(2, 1)

矩形 1 由于变换的特定顺序而扭曲或倾斜。当元素进行缩放时，其当前坐标系首先水平拉长。然后将这个新坐标系旋转 10 度。结果，矩形实际上是倾斜的。

相反，矩形 2 由于变换顺序相反而没有倾斜。 10 度的初始旋转会在缩放发生之前修改坐标系。因此，缩放只是沿着新的旋转轴拉长矩形，避免任何变形。

技术说明

首先应用缩放时，元素的边界框会放大或承包。当应用旋转变换时，它发生在这个修改后的边界框内。当旋转应用于缩放比例时，这会导致倾斜效果。

相反，当首先应用旋转时，它会改变坐标系的方向。随后，将缩放应用于该旋转系统，确保沿新轴发生伸长或收缩，从而产生不倾斜的矩形。

通过理解变换的顺序和相互作用，就可以清楚为什么链接变换如本例所示，不同的顺序可能会导致不同的结果。

以上是SVG 变换的顺序如何影响最终的形状扭曲？的详细内容。更多信息请关注PHP中文网其他相关文章！