SVG 变换解惑

这里先假设物体是定位在父级元素的 \((0, 0)\) 上, 那么物体边框的任意一个点 \((x, y)\) 的经过旋转后的位置是这么计算的:

先计算向量 \((x - x_o, y - y_o)\), 再对该向量旋转 \(\pi\) 弧度, 这个时候向量是围绕 \((x_o, y_o)\) 旋转的,

所以只要把计算结果加上 \((x_o, y_o)\) 得出旋转后点的位置, 整个过程可以用以下矩阵来表示:

\(M_{rot\_svg} = \left( \begin{array}{c} 1 & 0 & x_o \\ 0 & 1 & y_o \\ 0 & 0 & 1 \end{array} \right) \left( \begin{array}{c} \cos \pi & -\sin \pi & 0 \\ \sin \pi & \cos \pi & 0 \\ 0 & 0 & 1 \end{array} \right) \left( \begin{array}{c} 1 & 0 & -x_o \\ 0 & 1 & -y_o \\ 0 & 0 & 1 \end{array} \right)\)

\(M_{rot\_svg} \left(\begin{array}{c} x \\ y \\ 1\end{array}\right) \rightarrow \begin{equation*} \begin{cases} x_{rotated} = \cos \pi \times (x - x_o) - \sin \pi \times (y - y_o) + x_o \\ y_{rotated} = \sin \pi \times (x - x_o) + \cos \pi \times (y - y_o) + y_o \end{cases} \end{equation*}\)

这里需要说明一点, 凡是支持 x 和 y 属性的物体, 它们的 x 和 y 属性都是参与进了变换计算中的了:

\(\left(\begin{array}{c} x_{attr\_new} \\ y_{attr\_new} \\ 1 \end{array}\right) = \left( \begin{array}{c} 1 & 0 & x_{attr} \\ 0 & 1 & y_{attr} \\ 0 & 0 & 1 \end{array} \right) M_{rot\_svg} \left( \begin{array}{c} 1 & 0 & -x_{attr} \\ 1 & 0 & -y_{attr} \\ 0 & 0 & 1 \end{array} \right)\)

这么做的目的是为了在计算前让物体边框的左上角对齐 \((0, 0)\), 在计算后回到原来位置,

如等式所示, x 和 y 属性是发生在计算过程的最初和最后阶段的, 那么为什么 \(M_{rot\_svg}\) 不包含这一对变换呢?

原因有两个:

1. 实现 DOM 那样参考自身中心的旋转变换是基于 \(M_{rot\_svg}\) 进行拓展推导的,

   包含这两个变换没法保证让它们生在最初和最后阶段;

2. 会导致整个公式长上加长, 难以阅读;

开发者需要知道它们的存在, 并且在元素的 x 和 y 属性被设置时把这对矩阵加入进去.

想要实现 DOM 那样的围绕物体中心旋转, 需要把物体的中心平移对齐到 \((x_o, y_o)\) 再进行旋转, 最后平移回去, 完整的矩阵是这样的:

\(M_{rot\_dom} = \left( \begin{array}{c} 1 & 0 & \frac{w}{2} \\ 0 & 1 & \frac{h}{2} \\ 0 & 0 & 1 \end{array} \right) \left( \begin{array}{c} 1 & 0 & -x_o \\ 0 & 1 & -y_o \\ 0 & 0 & 1 \end{array} \right) M_{rot\_svg} \left( \begin{array}{c} 1 & 0 & x_o \\ 0 & 1 & y_o \\ 0 & 0 & 1 \end{array} \right) \left( \begin{array}{c} 1 & 0 & -\frac{w}{2} \\ 0 & 1 & -\frac{h}{2} \\ 0 & 0 & 1 \end{array} \right)\), 其中 \(w\) 和 \(h\) 是物体的宽和高.

正好 \(\left( \begin{array}{c} 1 & 0 & -x_o \\ 0 & 1 & -y_o \\ 0 & 0 & 1 \end{array} \right) M_{rot\_svg} \left( \begin{array}{c} 1 & 0 & x_o \\ 0 & 1 & y_o \\ 0 & 0 & 1 \end{array} \right)\) 有两对平移可以抵消掉: \(\left( \begin{array}{c} \cos \pi & -\sin \pi & 0 \\ \sin \pi & \cos \pi & 0 \\ 0 & 0 & 1 \end{array} \right)\),

所以 \(M_{rot\_dom} = \left( \begin{array}{c} 1 & 0 & \frac{w}{2} \\ 0 & 1 & \frac{h}{2} \\ 0 & 0 & 1 \end{array} \right)\left( \begin{array}{c} \cos \pi & -\sin \pi & 0 \\ \sin \pi & \cos \pi & 0 \\ 0 & 0 & 1 \end{array} \right)\left( \begin{array}{c} 1 & 0 & -\frac{w}{2} \\ 0 & 1 & -\frac{h}{2} \\ 0 & 0 & 1 \end{array} \right)\).

别看这个矩阵很长, 实际上在 SVG 里面很简单, 这里顺便 x 和 y 属性也考虑上去:

.svgElm {
    --xo: 200px;
    --yo: 200px;
    --w-div-2: 50px;
    --h-div-2: 50px;
    --angle: 60deg;
    --x: 100px;
    --y: 0px;
    transform: translate(var(--x), var(--y))
               translate(calc(var(--w-div-2) - var(--xo)), calc(var(--h-div-2) - var(--yo)))
               rotate(var(--angle))
               translate(calc(var(--xo) - var(--w-div-2)), calc(var(--yo) - var(--h-div-2)))
               translate(calc(0px - var(--x)), calc(0px - var(--y)));
}

\(rotate\) 函数的完整定义是 \(rotate(d, x, y)\), \(x\) 和 \(y\) 是围绕旋转的中心, 所以也可以这么实现:

.svgElm {
    --w-div-2: 50px;
    --h-div-2: 50px;
    --angle: 60deg;
    --x: 100px;
    --y: 0px;
    transform: rotate(var(--angle), calc(var(--x) + var(--w-div-2)), calc(var(--y) + var(--h-div-2)));
}

显然这种方法更简洁.

看到上面的公式可以发现: DOM 里面的旋转和 OpenGL 里面的旋转也是有差别.

因为 DOM 里面的元素也是以其边框的左上角进行定位的, 所以内部必定是先根据元素的位置计算出中心点后再围绕中心点进行旋转的, 最后再平移回去,

而 OpenGL 是根据物体的中心点进行变换的, 不需要平移.

缩放变换(transform 的 scale 函数)也是类似思路, 同样假设物体定位在父级元素的 \((0, 0)\) 上,

物体边框的任意一个点 \((x, y)\) 的经过缩放后的位置是这么计算的:

先计算向量 \((x - x_o, y - y_o)\), 再对该向量缩放, 最后把计算结果加上 \((x_o, y_o)\) 得到缩放后的点位置, 整个过程可用以下矩阵表示:

\(M_{scale\_svg} = \left( \begin{array}{c} 1 & 0 & x_o \\ 0 & 1 & y_o \\ 0 & 0 & 1 \end{array} \right) \left( \begin{array}{c} s_x & 0 & 0 \\ 0 & s_y & 0 \\ 0 & 0 & 1 \end{array} \right) \left( \begin{array}{c} 1 & 0 & -x_o \\ 0 & 1 & -y_o \\ 0 & 0 & 1 \end{array} \right)\)

\(M_{scale\_svg} \left(\begin{array}{c} x \\ y \\ 1\end{array}\right) \rightarrow \begin{equation*} \begin{cases} x_{scaled} = x_o + s_x \times (x - x_o) \\ y_{scaled} = y_o + s_y \times (y - y_o) \end{cases} \end{equation*}\)

想要实现 DOM 那样参考物体中心进行缩放, 也是先把物体的中心对齐 \((x_o, y_o)\) 进行缩放, 最后平移回去, 矩阵如下:

\(M_{scale\_dom} = \left( \begin{array}{c} 1 & 0 & \frac{w}{2} \\ 0 & 1 & \frac{h}{2} \\ 0 & 0 & 1 \end{array} \right) \left( \begin{array}{c} 1 & 0 & -x_o \\ 0 & 1 & -y_o \\ 0 & 0 & 1 \end{array} \right) M_{scale\_svg} \left( \begin{array}{c} 1 & 0 & x_o \\ 0 & 1 & y_o \\ 0 & 0 & 1 \end{array} \right) \left( \begin{array}{c} 1 & 0 & -\frac{w}{2} \\ 0 & 1 & -\frac{h}{2} \\ 0 & 0 & 1 \end{array} \right)\), 其中 \(w\) 和 \(h\) 是物体的宽和高.

在实现时同样考虑上元素的 x 和 y 属性:

.svgElm {
    --xo: 200px;
    --yo: 200px;
    --w-div-2: 50px;
    --h-div-2: 50px;
    --scale-factor: 0.2;
    --x: 100px;
    --y: 0px;
    transform: translate(var(--x), var(--y))
               translate(calc(var(--w-div-2) - var(--xo)), calc(var(--h-div-2) - var(--yo)))
               scale(var(--scale-factor))
               translate(calc(var(--xo) - var(--w-div-2)), calc(var(--yo) - var(--h-div-2)))
               translate(calc(0px - var(--x)), calc(0px - var(--y)));
}

\(scale\) 函数不像 \(rotate\) 函数那样可以指定缩放的参考中心, 因此需要老实掌握计算方法.

平移变换(transform 的 translate 函数)比前两个变换特殊一点, 前两个变换本质上就是基于 OpenGL 变换的拓展,

碰巧的拓展部分全都是平移变换, 换而言之整个计算就是加减法, 而只有加减法的情况下, 这几个矩阵可以随意调整顺序,

正好拓展的平移变换可以抵消:

\(M_{tl\_svg} = \left( \begin{array}{c} 1 & 0 & x_o \\ 0 & 1 & y_o \\ 0 & 0 & 1 \end{array} \right) \left( \begin{array}{c} 1 & 0 & t_x \\ 0 & 1 & t_y \\ 0 & 0 & 1 \end{array} \right) \left( \begin{array}{c} 1 & 0 & -x_o \\ 0 & 1 & -y_o \\ 0 & 0 & 1 \end{array} \right) = \left( \begin{array}{c} 1 & 0 & t_x \\ 0 & 1 & t_y \\ 0 & 0 & 1 \end{array} \right)\)

这与 DOM 的平移是一致的: \(M_{tl\_dom} = M_{tl\_svg}\).