如何对带角度的SVG路径执行轴镜像变换以对齐至目标路径同侧？

要让绿色路径绕红色直线（镜像轴）镜像后与蓝色虚线路径同侧，核心是实现斜向直线的镜像变换，具体方案如下：

一、变换原理 #

斜向镜像无法直接用简单的scale翻转，需要通过三次坐标空间变换组合完成：

1. 平移坐标系：将镜像轴上任意一点（比如红色直线起点(100,150)）移到原点，消除位置偏移
2. 旋转坐标系：将镜像轴旋转至与x轴重合，把斜向问题转化为水平镜像问题
3. 水平镜像：沿x轴翻转（y坐标取反）
4. 逆旋转+逆平移：将坐标系还原回原始位置

镜像轴关键参数 #

红色直线两端点为P1(100,150)和P2(600,550)：

• 向量P2-P1：(500,400)，斜率为0.8
• 旋转角度θ：arctan(4/5) ≈ 38.66°
• 三角函数值：cosθ=5/√41≈0.7809，sinθ=4/√41≈0.6247

二、SVG直接实现（手动添加变换） #

给绿色路径所在的<g id="cpTwo">添加transform属性，直接应用组合变换：

<g id="cpTwo" transform="translate(100,150) rotate(-38.66) scale(1,-1) rotate(38.66) translate(-100,-150)">
  <!-- 绿色路径代码保持不变 -->
</g>

如果需要精确值，可将38.66替换为rotate(-atan(4/5)*180/PI)，SVG支持直接解析该表达式。

三、编程实现（JavaScript） #

若需动态计算路径点变换，可按以下步骤执行：

核心变换函数 #

// 计算单个点的镜像变换结果
function mirrorPoint(x, y) {
  // 1. 平移到原点（以P1(100,150)为基准）
  const tx = x - 100;
  const ty = y - 150;
  
  // 2. 旋转-θ角度
  const cosθ = 5 / Math.sqrt(41);
  const sinθ = 4 / Math.sqrt(41);
  const rx = tx * cosθ + ty * sinθ;
  const ry = -tx * sinθ + ty * cosθ;
  
  // 3. 水平镜像
  const mx = rx;
  const my = -ry;
  
  // 4. 逆旋转+逆平移，还原位置
  const fx = mx * cosθ - my * sinθ + 100;
  const fy = mx * sinθ + my * cosθ + 150;
  
  return [fx, fy];
}

// 解析并变换路径的d属性
function transformPathD(dStr) {
  // 提取路径上的所有坐标点（适配当前路径的M/L指令）
  const segments = dStr.split(/M|L/).filter(Boolean);
  let newD = `M${mirrorPoint(...segments[0].split(',').map(Number)).join(',')}`;
  
  for (let i = 1; i < segments.length; i++) {
    const [x, y] = segments[i].split(',').map(Number);
    newD += `L${mirrorPoint(x, y).join(',')}`;
  }
  return newD;
}

// 应用变换到绿色路径
const greenPath = document.getElementById('2');
greenPath.setAttribute('d', transformPathD(greenPath.getAttribute('d')));

补充说明 #

• 上述代码针对当前路径的M和L指令做了简化处理，如果路径包含曲线指令（如C/S/Q），需扩展解析逻辑，提取所有控制点坐标逐一变换
• 变换完成后，绿色路径的起点和终点会落在红色直线的另一侧，与蓝色路径处于同侧

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