svg 矩陣轉換

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform

這個方法，應用到多邊形，理論上也是可行的吧

/*
在平面內,已知一個矩形的四個角坐標,將矩形繞中心點轉動一個角度,求旋轉后的角坐標.
也就是已知半徑,求每個點旋轉后的坐標.

把旋轉前和旋轉后的點加上中心點看成一個等腰三角形就好解決了,不用扇形公式,而是用三角形公式.

假設矩形的左上角為（left, top),右下角為（right, bottom),
則矩形上任意點（x0, y0）繞其中心（xcenter,ycenter)逆時針旋轉angle角度后,新的坐標位置（x′, y′）的計算公式為：


xcenter = (right － left ＋ 1) ／ 2 ＋ left;
ycenter = (bottom － top ＋ 1) ／ 2 ＋ top;

x′ = (x0 － xcenter) cosθ － (y0 － ycenter) sinθ ＋ xcenter;
y′ = (x0 － xcenter) sinθ ＋ (y0 － ycenter) cosθ ＋ ycenter;


*/
// θ 弧度/角度

https://www.cnblogs.com/zhoug2020/p/5797070.html

https://repl.it/@xgqfrms/svg-matrix-transform

//  θ  arc/ rad / angle

const svgMatrixConvert = (polygon,  angle = 0) => {
    const poly = document.querySelector(`[id="${polygon}"]`);
    // const {
    //   x,
    //   y,
    //   width,
    //   height,
    // } = poly.getBBox();
    // let cx = x + .5 * width
    // let cy = y + .5 * height;
    const {
      x,
      y,
      width,
      height,
      // top,
      // bottom,
      left,
      right,
    } = poly.getBoundingClientRect();
    console.log(`testing`);
    const cx = (right - left + 1) / 2 + left;
    const cy = (bottom - top + 1) / 2 + top;
    // const px = (x0 - xcenter) cosθ - (y0 - ycenter) sinθ + xcenter;
    // const py = (x0 - xcenter) sinθ + (y0 - ycenter) cosθ + ycenter;
    // polygon points
    const points = [];
    [...poly.points].forEach(point => {
        // SVGPoint
        // points.push(point.x + x, point.y + y);
        const {
          x,
          y,
        } = point;
        // const px = (x - cx) * cosθ - (y - cy) * sinθ + cx;
        // const py = (x - cx) * sinθ + (y - cy) * cosθ + cy;
        const px = (x - cx) * Math.cos(angle) - (y - cy) * Math.sin(angle) + cx;
        const py = (x - cx) * Math.sin(angle) + (y - cy) * Math.cos(angle) + cy;
        points.push(px, py);
    });
    poly.setAttribute(`points`, points.join(` `));
    return ;
};

設置旋轉的 origin，為 polygon 的中心

默認 SVG, 左上角 0,0

// 設置旋轉的 origin，為 polygon 的中心
// 偏移量
getCenter = () => {
    // let [top, left, right, bottom] = [];
    let [top, left, right, bottom] = ["", "", "", ""];
    [...this.poly.points].forEach(({x, y}, i) => {
      if (i === 0) {
        top = y;
        bottom = y;
        left = x;
        right = x;
      } else {
        top = Math.min(top, y);
        bottom = Math.max(bottom, y);
        left = Math.min(left, x);
        right = Math.max(right, x);
      }
    });
    return [(left + right) / 2, (top + bottom) / 2];
  }

---

matrix

http://cn.voidcc.com/question/p-fbljwwvs-zm.html

https://blog.csdn.net/atgwwx/article/details/8305842

svg to Map

https://www.codenong.com/38155854/

等比例縮

https://www.zhangxinxu.com/wordpress/2015/10/understand-svg-transform/