如何正确实现SVG中<path>元素的位置交换与排序还原？

我需要实现SVG中多个<path>元素的打乱与可视化排序还原：先随机打乱各path的位置，再通过插入排序等算法逐步交换元素位置，让它们回到初始布局。因为path没有x/y属性，所以用transform: translate()实现移动，但遇到两个问题：

• 第一次交换正常，后续交换会出现严重位置偏移
• CSS过渡在桌面端正常，但手机端失效

原代码核心问题 #

1. 实时位置计算错误：使用getBoundingClientRect()获取的是元素变换后的视口位置，而transform是叠加生效的。第二次交换时，元素已经带有translate变换，计算出的偏移量会基于变换后的位置，导致越移越偏。
2. 移动端过渡兼容性：部分移动端浏览器对SVG元素的transform过渡支持需要前缀或额外触发条件。

解决方案 #

1. 预先存储初始位置，追踪目标位置索引 #

• 提前计算每个path的初始中心位置（相对于SVG容器），避免依赖变换后的实时位置
• 给每个元素绑定targetIndex属性，标记它当前应该回到的初始位置索引，交换时只需要交换这个索引，再计算对应偏移量

2. 修正交换逻辑 #

• 基于初始位置数组，根据元素的targetIndex计算需要平移的距离，而不是用实时位置做差
• 每次交换后，更新两个元素的targetIndex，确保下一次计算的基准正确

3. 修复移动端过渡失效 #

• 给path元素添加-webkit-transition前缀，适配移动端WebKit内核浏览器
• 添加will-change: transform提示浏览器提前优化渲染

完整代码 #

HTML #

<svg width="500" height="800" xmlns="http://www.w3.org/2000/svg">
  <path id="black-square" d="M 10 10 H 90 V 90 H 10 L 10 10" fill="black" />
  <path id="red-square" d="M 130 70 h 80 v 80 h -80 v -80" fill="red" />
  <path id="green-square" d="M 20 120 h 80 v 80 h -80 v -80" fill="green" />
</svg>

CSS #

path {
  /* 添加-webkit-前缀适配移动端 */
  transition: transform 3s;
  -webkit-transition: transform 3s;
  /* 提示浏览器优化渲染 */
  will-change: transform;
}

JavaScript #

// 工具函数：延迟函数
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// 初始化：存储所有path的初始位置（相对于SVG容器的中心坐标）
const svg = document.querySelector('svg');
const paths = Array.from(document.querySelectorAll('path'));
const initialPositions = [];

// 计算每个path的初始中心位置（相对于SVG）
paths.forEach((path, index) => {
  const bbox = path.getBBox();
  // SVG的坐标系统，计算中心相对于SVG左上角的位置
  const centerX = bbox.x + bbox.width / 2;
  const centerY = bbox.y + bbox.height / 2;
  initialPositions.push([centerX, centerY]);
  // 给每个元素绑定初始索引和当前目标索引
  path.dataset.initialIndex = index;
  path.dataset.targetIndex = index;
});

// 随机打乱目标索引（实现打乱效果）
function shufflePaths() {
  const shuffledIndices = [...paths.keys()].sort(() => Math.random() - 0.5);
  paths.forEach((path, index) => {
    path.dataset.targetIndex = shuffledIndices[index];
    // 直接移动到打乱后的位置
    moveToTarget(path);
  });
}

// 将元素移动到其targetIndex对应的初始位置
function moveToTarget(path) {
  const targetIndex = parseInt(path.dataset.targetIndex);
  const [targetX, targetY] = initialPositions[targetIndex];
  const bbox = path.getBBox();
  const currentCenterX = bbox.x + bbox.width / 2;
  const currentCenterY = bbox.y + bbox.height / 2;
  // 计算需要平移的偏移量
  const translateX = targetX - currentCenterX;
  const translateY = targetY - currentCenterY;
  path.setAttribute('transform', `translate(${translateX}, ${translateY})`);
}

// 交换两个元素的目标位置并执行移动
async function swap(e1, e2, delayMs = 3000) {
  // 交换目标索引
  const tempIndex = e1.dataset.targetIndex;
  e1.dataset.targetIndex = e2.dataset.targetIndex;
  e2.dataset.targetIndex = tempIndex;
  
  // 移动到新的目标位置
  moveToTarget(e1);
  moveToTarget(e2);
  
  if (delayMs) {
    await delay(delayMs);
  }
}

// 示例：打乱后执行交换还原
shufflePaths();
delay(3000)
  .then(() => swap(paths[0], paths[1]))
  .then(() => swap(paths[1], paths[2]))
  .then(() => swap(paths[0], paths[2]));

关键说明 #

• 使用getBBox()获取元素自身的边界框，不受transform影响，确保初始位置计算准确
• 用dataset.targetIndex追踪元素应该到达的初始位置索引，所有偏移计算都基于初始位置数组，避免叠加错误
• CSS添加前缀和will-change解决移动端过渡失效问题

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