如何在SVG路径数据（d字符串）中直接执行旋转操作？

核心数学逻辑 #

围绕自定义原点(x,y)旋转θ度的操作，需要对每个坐标点执行三步变换：

1. 坐标平移：将目标点的坐标减去旋转原点，让旋转原点临时成为坐标系原点，公式：x₀ = px - x; y₀ = py - y（px, py是原坐标）
2. 旋转变换：用旋转公式计算平移后点的新坐标，θ需先转为弧度（弧度 = 角度 × π/180）：
   • 旋转后x坐标：x' = x₀ × cosθ - y₀ × sinθ
   • 旋转后y坐标：y' = x₀ × sinθ + y₀ × cosθ
3. 坐标还原：将旋转后的坐标加回旋转原点，得到最终坐标：finalX = x' + x; finalY = y' + y

路径命令的特殊处理 #

SVG路径命令分大小写，处理逻辑不同：

• 大写命令（如M、L、H、V）：使用绝对坐标，直接对坐标执行上述三步变换
• 小写命令（如m、l、h、v）：使用相对坐标（基于前一个点的偏移量），无需平移，直接对偏移量执行旋转变换即可

处理路径d字符串的具体步骤 #

1. 拆分路径命令：将d字符串拆分为单个命令和对应的参数，比如把M349,228h212v-1331h-212v133拆分为M 349,228、h 212、v -1331等独立单元
2. 逐个处理命令：根据命令的大小写类型，对坐标/偏移量应用对应的变换逻辑
3. 拼接新路径：将处理后的命令和参数重新组合成新的d字符串

示例计算（你的案例） #

给定参数：

• 原d字符串：M349,228h212v-1331h-212v133
• 旋转角度：24°（转为弧度≈0.4189）
• 旋转原点：(455, 161.5)

第一步：计算三角函数值 #

cos(24°)≈0.9135，sin(24°)≈0.4067

第二步：逐个处理命令 #

1. M349,228（绝对命令）

   • 平移：x₀=349-455=-106，y₀=228-161.5=66.5
   • 旋转：x'=-106×0.9135 - 66.5×0.4067≈-123.88，y'=-106×0.4067 + 66.5×0.9135≈17.64
   • 还原：finalX=-123.88+455≈331.12，finalY=17.64+161.5≈179.14
     → 处理后：M331.12,179.14

2. h212（相对水平偏移）
   原偏移为(212, 0)，直接旋转：
   x'=212×0.9135 - 0×0.4067≈193.66，y'=212×0.4067 + 0×0.9135≈86.22
   旋转后偏移不再是纯水平，改用相对线命令l
   → 处理后：l193.66,86.22

3. v-1331（相对垂直偏移）
   原偏移为(0, -1331)，直接旋转：
   x'=0×0.9135 - (-1331)×0.4067≈541.32，y'=0×0.4067 + (-1331)×0.9135≈-1215.87
   旋转后偏移不再是纯垂直，改用l命令
   → 处理后：l541.32,-1215.87

4. h-212（相对水平偏移）
   原偏移为(-212, 0)，直接旋转：
   x'=-212×0.9135 - 0×0.4067≈-193.66，y'=-212×0.4067 + 0×0.9135≈-86.22
   → 处理后：l-193.66,-86.22

5. v133（相对垂直偏移）
   原偏移为(0, 133)，直接旋转：
   x'=0×0.9135 - 133×0.4067≈-54.09，y'=0×0.4067 + 133×0.9135≈121.49
   → 处理后：l-54.09,121.49

最终生成的d字符串 #

将所有处理后的命令拼接（保留两位小数）：

M331.12,179.14l193.66,86.22l541.32,-1215.87l-193.66,-86.22l-54.09,121.49

内容的提问来源于stack exchange，提问作者Sharif Hasan