Question

所有

当我尝试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变换的解释？

由于

Answer 1

来自W3C

x =“” 矩形边的x轴坐标，在当前用户坐标系中具有较小的x轴坐标值。

和Mozilla Developer Network：

此属性指示用户坐标中的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>

在第一个中，首先应用比例。现在，rect和用户坐标系统都是紫色矩形的2倍。因此当它移动到10,10时，它与紫色矩形的位置不同。

在第二个中，首先移动矩形。它具有与紫色矩形相同的坐标系，因此它最终位于完全相同的位置。它是然后缩放，所以它的左上角停留在同一个地方。

Answer 2

Every transform function like scale, translate represents a matrix. And matrix concatenation/multiplication is not commutative. So M1 x M2 must not be equal to M2 x M1.

E.g. a scaling matrix (column major order), scale(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

E.g. a translation matrix, 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

Scale * Translate:

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

Translate * Scale:

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

关于CSS转换顺序的困惑

2 个答案: