如何实现点击时盒子动态居中并计算viewBox中心值？

核心思路 #

viewBox"0 0 1200 800"的中心坐标为(1200/2, 800/2) = (600, 400)（SVG坐标系下的坐标）。要让点击的盒子中心与该点重合，需动态计算盒子当前位置到目标中心的偏移量，同时考虑scale(1.5)的变换影响。

修改后的点击事件代码 #

替换原代码中点击事件的逻辑，使用以下动态计算逻辑：

div.addEventListener('click', () => {
  if (clicked) {
    div.style.transform = 'none';
    clicked = false;
  } else {
    const svg = document.getElementById('mySvg');
    // 解析viewBox参数并计算中心坐标
    const viewBox = svg.getAttribute('viewBox').split(' ').map(Number);
    const viewBoxCenterX = viewBox[2] / 2;
    const viewBoxCenterY = viewBox[3] / 2;
    const scaleFactor = 1.5;

    // 获取元素与SVG的页面位置信息
    const boxRect = div.getBoundingClientRect();
    const svgRect = svg.getBoundingClientRect();

    // 计算SVG的缩放比例（页面像素与SVG单位的转换系数）
    const svgScaleX = svgRect.width / viewBox[2];
    const svgScaleY = svgRect.height / viewBox[3];

    // 计算盒子中心在SVG坐标系下的坐标
    const boxCenterPageX = boxRect.left + boxRect.width / 2;
    const boxCenterPageY = boxRect.top + boxRect.height / 2;
    const boxCenterSvgX = (boxCenterPageX - svgRect.left) / svgScaleX;
    const boxCenterSvgY = (boxCenterPageY - svgRect.top) / svgScaleY;

    // 计算translate偏移量：抵消缩放后的位置偏移，确保中心对齐
    const translateX = viewBoxCenterX - boxCenterSvgX * scaleFactor;
    const translateY = viewBoxCenterY - boxCenterSvgY * scaleFactor;

    // 应用最终变换
    div.style.transform = `translate(${translateX}px, ${translateY}px) rotateY(180deg) scale(${scaleFactor})`;
    clicked = true;
  }
});

逻辑说明 #

1. viewBox中心计算：直接通过viewBox的宽高取半得到目标中心坐标。
2. 坐标转换：利用getBoundingClientRect()获取页面像素位置，再通过SVG的缩放比例转换为SVG坐标系下的坐标，避免SVG缩放对定位的影响。
3. 偏移量计算：由于CSS变换顺序是从右到左执行（先scale再translate），需用目标中心减去缩放后的盒子中心坐标，得到正确的平移距离，确保缩放后盒子中心准确落在viewBox中心。

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