使用SVG.js处理SVG时，缩放后Pin图标的重定位与还原难题

我明白你的痛点了——缩放填满视口后，要把Pin图标精准还原回36×36的原始尺寸，还得让它的底部中心乖乖待在原来的位置对吧？别担心，咱们一步步来搞定：

第一步：提前记录初始关键信息 #

在SVG还没被缩放的时候，先把Pin图标的视口底部中心坐标和原始尺寸存下来，这是后续还原的基准。用getBoundingClientRect()可以直接拿到元素在浏览器视口中的位置：

// 用svg.js选中你的Pin图标和容器SVG
const pinIcon = SVG('#pin-icon');
const containerSvg = SVG('#your-svg-container');

// 记录初始状态的关键参数
const originalSize = { width: 36, height: 36 };
const initialRect = pinIcon.node.getBoundingClientRect();
// 原始底部中心的视口坐标
const originalBottomCenter = {
  x: initialRect.left + initialRect.width / 2,
  y: initialRect.bottom
};

第二步：还原尺寸与定位 #

当你需要把Pin图标还原时，咱们分两步走：先重置尺寸，再精准定位到底部中心的原始位置。这里要注意SVG坐标系统和视口的转换，确保不管容器SVG怎么缩放，Pin都能回到正确位置：

function restorePinIcon() {
  // 1. 先把Pin的尺寸重置回原始大小，清除之前的缩放变换
  pinIcon.size(originalSize.width, originalSize.height);
  pinIcon.transform({ scale: 1 });

  // 2. 把视口的原始底部中心坐标转换为SVG内部的坐标
  const svgNode = containerSvg.node;
  const screenPoint = svgNode.createSVGPoint();
  screenPoint.x = originalBottomCenter.x;
  screenPoint.y = originalBottomCenter.y;
  // 逆变换得到SVG内部的坐标，适配容器缩放后的坐标系
  const svgCoords = screenPoint.matrixTransform(svgNode.getScreenCTM().inverse());

  // 3. 设置Pin的位置，让它的底部中心对齐转换后的坐标
  pinIcon.x(svgCoords.x - originalSize.width / 2);
  pinIcon.y(svgCoords.y - originalSize.height);
}

为什么这么做？ #

• 用getBoundingClientRect()获取视口坐标，确保原始位置的记录不受SVG内部坐标系的影响。
• 通过createSVGPoint和getScreenCTM().inverse()做坐标转换，能完美适配容器SVG被缩放后的坐标系，保证定位精准。
• 先重置尺寸和缩放，再设置位置，避免变换叠加导致的偏差。

如果你的容器SVG在缩放时是围绕某个中心点（比如视口中心）缩放的，这个方法依然有效，因为我们是直接基于视口的原始位置来定位的，完全绕开了缩放变换的干扰。

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