SVG元素随鼠标移动平移复位问题排查及指定方向实现正确性验证

一、解决元素平移后回到初始位置的问题 #

你的代码里每次设置transform时，都是基于元素的原始初始位置进行平移，而不是在上一次移动后的位置基础上继续偏移。这是因为translate()本身是相对于元素的默认位置计算的，不会自动累加之前的位移。要解决这个问题，我们需要手动跟踪元素的当前位置，每次移动时把新的偏移量累加到已有位置上。

修改步骤： #

1. 初始化变量记录元素当前的X、Y偏移量：

let currentX = 0;
let currentY = 0;

2. 在setCursorPosition函数中，计算本次偏移并累加，再应用到transform：

// 替换原注释的transform行
const offsetX = Math.cos(angle) * speedX;
const offsetY = Math.sin(angle) * speedY;
currentX += offsetX;
currentY += offsetY;
m.style.transform = `translate(${currentX}px, ${currentY}px)`;

二、修正随机方向，确保避开光标20°范围 #

当前的角度生成逻辑只是随机生成0-340°的角度，完全没有结合光标相对于元素的方向来排除20°的禁止区域，这显然不符合你的需求。我们需要先计算光标指向元素的角度，再在剩下的340°范围内随机选择方向。

实现步骤： #

1. 计算光标相对于元素中心的角度：
   在setCursorPosition函数中，先获取元素的位置和中心坐标，再计算光标到元素中心的向量角度：

const rect = m.getBoundingClientRect();
const elementCenterX = rect.left + rect.width / 2;
const elementCenterY = rect.top + rect.height / 2;
// 光标相对于元素中心的向量
const deltaX = e.clientX - elementCenterX;
const deltaY = e.clientY - elementCenterY;
// 转换为弧度制角度（范围0-2π）
const cursorAngle = Math.atan2(deltaY, deltaX);

2. 定义需要排除的20°范围（光标角度±10°）：

const excludeHalfRange = 10 * Math.PI / 180; // 20°的一半，转为弧度
const minExcludeAngle = cursorAngle - excludeHalfRange;
const maxExcludeAngle = cursorAngle + excludeHalfRange;

3. 在有效范围内生成随机角度：
   我们把圆周分成两个有效区间（0到minExcludeAngle、maxExcludeAngle到2π），随机选择一个区间再生成角度：

function getValidRandomAngle(minExclude, maxExclude) {
  const range1Length = minExclude - 0;
  const range2Length = 2 * Math.PI - maxExclude;
  // 随机选一个区间
  const random = Math.random() * (range1Length + range2Length);
  return random < range1Length ? random : maxExclude + (random - range1Length);
}
// 在setCursorPosition中调用更新angle
angle = getValidRandomAngle(minExcludeAngle, maxExcludeAngle);

完整修正后的代码 #

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SVG</title>
</head>
<body>
<svg id="m" width="40" height="40">
<circle cx="20" cy="20" r="20" fill="red" stroke="red" stroke-width="1"/>
</svg>
<script>
let m = document.getElementById("m");
let angle = 0;
var timestamp, lastMouseX, lastMouseY = null;
let currentX = 0;
let currentY = 0;

function getValidRandomAngle(minExclude, maxExclude) {
  const range1Length = minExclude - 0;
  const range2Length = 2 * Math.PI - maxExclude;
  const random = Math.random() * (range1Length + range2Length);
  return random < range1Length ? random : maxExclude + (random - range1Length);
}

let setCursorPosition = function(e) {
  // 计算鼠标速度
  if (timestamp === null) {
    timestamp = Date.now();
    lastMouseX = e.screenX;
    lastMouseY = e.screenY;
    return;
  }
  var now = Date.now();
  var dt = now - timestamp;
  var dx = e.screenX - lastMouseX;
  var dy = e.screenY - lastMouseY;
  var speedX = Math.round(dx / dt * 100);
  var speedY = Math.round(dy / dt * 100);
  timestamp = now;
  lastMouseX = e.screenX;
  lastMouseY = e.screenY;

  // 计算光标相对于元素中心的角度
  const rect = m.getBoundingClientRect();
  const elementCenterX = rect.left + rect.width / 2;
  const elementCenterY = rect.top + rect.height / 2;
  const deltaX = e.clientX - elementCenterX;
  const deltaY = e.clientY - elementCenterY;
  const cursorAngle = Math.atan2(deltaY, deltaX);

  // 定义排除的20°范围
  const excludeHalfRange = 10 * Math.PI / 180;
  const minExcludeAngle = cursorAngle - excludeHalfRange;
  const maxExcludeAngle = cursorAngle + excludeHalfRange;

  // 获取有效的随机角度
  angle = getValidRandomAngle(minExcludeAngle, maxExcludeAngle);

  // 累加偏移并更新位置
  const offsetX = Math.cos(angle) * speedX;
  const offsetY = Math.sin(angle) * speedY;
  currentX += offsetX;
  currentY += offsetY;
  m.style.transform = `translate(${currentX}px, ${currentY}px)`;
};

document.addEventListener("mousemove", e => setCursorPosition(e));
</script>
</body>
</html>

额外说明 #

• 现在元素会基于上一次的位置持续平移，不会再跳回初始位置；
• 每次鼠标移动时都会重新计算避开光标20°范围的随机方向，确保元素不会向光标位置移动；
• 如果觉得元素移动速度过快，可以调整speedX和speedY的计算系数（比如把*100改成*50），让移动更平滑。

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