如何获取经45度旋转后的SVG路径d属性值？

要解决这个问题，我们需要手动计算原路径每个关键点旋转45度后的坐标，再重构出旋转后的路径d值，步骤如下：

1. 拆解原路径的关键坐标 #

你的原路径是一个带圆角的正方形，先把所有核心坐标（包括圆角控制点和顶点）提取出来：

M13,14 → 路径起点（右上角圆角的起始点）
H2 → 移动到左上角圆角起始点 (2,14)
c-0.5523,0-1-0.4477-1-1 → 左上角圆角曲线，终点为 (1,13)
V2 → 移动到左下角圆角起始点 (1,2)
c0-0.5523,0.4477-1,1-1 → 左下角圆角曲线，终点为 (2,1)
h11 → 移动到右下角圆角起始点 (13,1)
c0.5523,0,1,0.4477,1,1 → 右下角圆角曲线，终点为 (14,2)
v11 → 移动到右上角圆角起始点 (14,13)
C14,13.5523,13.5523,14,13,14 → 闭合路径回到起点

2. 确定旋转规则 #

我们选择原正方形的中心作为旋转中心，原正方形的x范围是1_{14，y范围是1}14，所以中心坐标是 (7.5, 7.5)。

绕点 (cx, cy) 旋转45度的坐标转换公式（cos45°=sin45°≈0.7071）：

x' = (x - cx) * 0.7071 - (y - cy) * 0.7071 + cx
y' = (x - cx) * 0.7071 + (y - cy) * 0.7071 + cx

3. 计算旋转后的所有关键点 #

逐个计算每个点的新坐标（保留三位小数）：

同时，圆角的贝塞尔曲线相对向量也按相同规则旋转，保证圆角的曲率不变。

4. 重构旋转后的路径d值 #

根据旋转后的坐标，保持原路径的圆角结构，最终得到的菱形路径d值为：

M6.793,15.985H-0.985C-1.375,15.985,-1.375,15.375,-0.985,14.985V6.793C-0.985,6.403,-1.375,5.793,-0.985,5.403H8.207C8.597,5.403,9.207,5.793,9.597,6.403V14.985C9.597,15.375,9.207,15.985,8.207,15.985H6.793z

这个路径和原正方形旋转45度后的形状完全一致，保留了原有的圆角效果，你可以直接替换原d值使用。

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