如何手动移除SVG中的Rotate、Skew、Scale变换（已掌握Translate方法）

你已经掌握了移除Translate变换的方法，下面针对Rotate、Skew、Scale三种变换，给出手动计算移除的步骤和示例，适合用PHP动态处理内联SVG。

Rotate（旋转） #

旋转变换的核心是对路径的每个坐标点应用旋转公式，需注意是否指定了旋转中心：

1. 解析参数：从transform="rotate(θ, cx, cy)"中提取旋转角度θ（转成弧度），以及可选的旋转中心坐标(cx, cy)，未指定中心则默认(0,0)。
2. 逐个处理路径点：
   • 若有旋转中心，先将点平移至以中心为原点：x1 = x - cx，y1 = y - cy
   • 应用旋转公式：

     x_rot = x1 * cos(θ) - y1 * sin(θ)
     y_rot = x1 * sin(θ) + y1 * cos(θ)
     

   • 若有旋转中心，将点平移回原坐标系：x_final = x_rot + cx，y_final = y_rot + cy
3. 替换路径中所有原始坐标为计算后的坐标，移除<g>标签。

示例：
原SVG代码：

<g transform="rotate(30, 100, 200)">
  <path d="m 100,200 l 50,0 l 0,50 z" />
</g>

计算后（θ=30°，cosθ≈0.866，sinθ≈0.5）：

<path d="m 100,200 l 143.3,225 l 118.3,268.3 z" />

Skew（倾斜） #

倾斜分为SkewX（X轴倾斜）和SkewY（Y轴倾斜），分别处理每个坐标点：

SkewX(θ) #

对每个点(x, y)应用公式：

x_final = x + y * tan(θ)
y_final = y

SkewY(θ) #

对每个点(x, y)应用公式：

x_final = x
y_final = y + x * tan(θ)

注意：θ为角度，需转成弧度计算正切值。

示例：
原SVG代码：

<g transform="skewX(20)">
  <path d="m 0,0 l 50,0 l 0,50 z" />
</g>

计算后（tan20°≈0.364）：

<path d="m 0,0 l 50,0 l 68.2,50 z" />

Scale（缩放） #

缩放分为普通缩放和指定中心的缩放，步骤如下：

1. 解析参数：从transform="scale(sx, sy, cx, cy)"中提取X轴缩放比例sx、Y轴缩放比例sy（未指定则sx=sy），以及可选的缩放中心(cx, cy)。
2. 逐个处理路径点：
   • 若有缩放中心，先将点平移至以中心为原点：x1 = x - cx，y1 = y - cy
   • 应用缩放公式：

     x_scaled = x1 * sx
     y_scaled = y1 * sy
     

   • 若有缩放中心，将点平移回原坐标系：x_final = x_scaled + cx，y_final = y_scaled + cy
3. 替换路径中所有原始坐标为计算后的坐标，移除<g>标签。

示例：
原SVG代码：

<g transform="scale(2, 1.5, 100, 200)">
  <path d="m 100,200 l 50,0 l 0,50 z" />
</g>

计算后：

<path d="m 100,200 l 200,200 l 200,275 z" />

额外注意事项 #

• 所有角度计算需转成弧度，PHP中可使用deg2rad()函数实现。
• 路径中的相对坐标命令（如m/l）建议先转换为绝对坐标（M/L）再计算，处理后可保留绝对坐标或转回相对坐标。
• 若遇到复合变换（如rotate+scale+translate），需按变换顺序的逆序应用对应逆变换，或直接计算组合变换矩阵后批量处理所有点。

内容的提问来源于stack exchange，提问作者Dikkie Dik