svg 中的矩阵

从 18 年到 22 年，第一次知道 svg 中其实已经存在矩阵相关的 API，我们先来看一下通过矩阵运算实现的一个例子。

See the Pen transform ellipse by zeng (@zengxiaoluan) on CodePen.

核心代码是这样的：

  let m4 = translate2origin.multiply(ellOldMatrix);
  let m8 = rotate2zeroDegree.multiply(m4);
  let m5 = scaleMatrix.multiply(m8);
  let m7 = rotateBackMatrix.multiply(m5);
  let m6 = translateBackMatrix.multiply(m7);

这段 api 读起来，有点费劲。按照我们人类的语言，矩阵乘法运算应该是将矩阵 ellOldMatrix 移到原点，再旋转 -a 度，再缩放 x 倍，再旋转 a 度，再平移到原来的位置。

我们需要将 api 重新设计一下。类似这样：

class SelfMatrix {
  matrix;
  constructor(m) {
    this.matrix = m;
  }
  multiply(m) {
    let m1 = m.multiply(this.matrix);
    return new SelfMatrix(m1);
  }
}

就能愉快的链式调用了。

new SelfMatrix(ellOldMatrix)
  .multiply(translate2origin)
  .multiply(rotate2zeroDegree)
  .multiply(scaleMatrix)
  .multiply(rotateBackMatrix)
  .multiply(translateBackMatrix);