如何让SVG path元素基于自身未知中心点实现悬停缩放效果

问题根因 #

SVG的transform变换默认以全局坐标原点(0,0)为计算基准，浏览器对transform的解析遵循从右到左的矩阵套用规则。此前的逻辑里虽然通过getBBox()计算了元素中心点，但如果变换的书写顺序颠倒，平移的偏移量会被缩放计算完全抵消，最终出现“只有scale生效、中心参照点偏移”的异常。

标准实现逻辑 #

要实现围绕元素自身几何中心的缩放，必须严格按照固定顺序拼接transform值，不能打乱顺序：

• 先将元素坐标体系平移至自身几何中心位置
• 在中心位置完成对应比例的缩放
• 再将坐标体系平移回全局原始位置

对应的transform通用公式为：
translate(中心X坐标, 中心Y坐标) scale(缩放比例) translate(-中心X坐标, -中心Y坐标)

现有代码适配调整 #

针对已有的两个交互函数做对应修改，无需重构原有事件绑定逻辑：

1. 封装通用的元素中心获取方法，适配所有目标元素，无需为单个godwardSqare_obj做硬编码

   function getElementCenter(el) {
     // 获取元素无变换状态下的边界信息
     const bbox = el.getBBox();
     return {
       x: bbox.x + bbox.width / 2,
       y: bbox.y + bbox.height / 2
     }
   }
   

2. 调整悬停触发的selected_colour函数
   • 每次触发时实时读取当前元素的几何中心，避免元素位置变动后中心点计算失效
   • 按照固定顺序拼接完整的transform值，不要拆分写独立的变换属性

   function selected_colour(e) {
     const el = e.currentTarget;
     const center = getElementCenter(el);
     // 设置1.2倍缩放，搭配平滑过渡效果
     el.style.transform = `translate(${center.x}px, ${center.y}px) scale(1.2) translate(${-center.x}px, ${-center.y}px)`;
     el.style.transition = 'transform 0.2s ease';
   }
   

3. 调整移出触发的unselected_colour函数
   • 直接将元素的transform重置为none，无需手动计算反向平移，避免变换矩阵累计带来的偏移误差

   function unselected_colour(e) {
     const el = e.currentTarget;
     el.style.transform = 'none';
   }
   

避坑提示 #

• 不要将计算得到的中心点硬编码在脚本中：如果使用在线编辑器生成的SVG可调整元素位置，硬编码的中心点会在元素位移后失效，事件触发时实时读取元素边界即可规避该问题。
• 不要将平移、缩放拆分为多个独立的transform属性赋值：多次给transform属性赋值会被浏览器后一次设置的内容完全覆盖，必须将所有变换规则合并为单个字符串写入同一条transform属性。
• 只要在移出逻辑里将transform重置为none，就不会出现变换矩阵累计叠加的问题，无需额外做复杂的坐标换算。

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