基于GSAP的SVG地图交互功能开发遇阻，求解决方案

核心思路 #

通过维护激活状态标记和当前展开元素的引用，结合GSAP的动画控制与事件监听的启用/禁用，实现你需要的三个交互逻辑。

具体实现步骤及代码修改 #

1. 新增状态变量

在代码开头添加全局状态变量，用于跟踪交互状态：

let isExpanded = false;
let currentActiveElement = null;

2. 修改点击事件逻辑

给每个地图元素绑定点击事件，处理展开、重置、跳转三种场景：

// 替换成你实际使用的地图元素选择器
document.querySelectorAll('.map-region').forEach(region => {
  region.addEventListener('click', (e) => {
    e.stopPropagation(); // 阻止冒泡触发全局重置
    
    if (currentActiveElement === region) {
      // 二次点击：触发链接跳转
      const targetLink = region.getAttribute('data-link'); // 假设元素通过data属性存跳转地址
      if (targetLink) window.location.href = targetLink;
      return;
    }
    
    // 先重置之前的激活元素
    resetAllRegions();
    
    // 激活当前元素：保持放大状态
    isExpanded = true;
    currentActiveElement = region;
    gsap.to(region, { scale: 1.2, duration: 0.3 });
    gsap.to('.map-region:not(.active)', { opacity: 0.3, duration: 0.3 });
    region.classList.add('active');
    region.style.pointerEvents = 'none'; // 临时禁用hover事件
  });
});

3. 处理外部点击重置

给document绑定点击事件，点击非激活元素区域时恢复初始状态：

document.addEventListener('click', () => {
  if (isExpanded) resetAllRegions();
});

4. 调整hover事件逻辑

在原有hover的回调里加入激活状态判断，确保仅未展开时触发hover效果：

document.querySelectorAll('.map-region').forEach(region => {
  region.addEventListener('mouseenter', () => {
    if (isExpanded) return; // 已展开时跳过hover逻辑
    gsap.to(region, { scale: 1.1, duration: 0.2 });
    gsap.to('.map-region:not(:hover)', { opacity: 0.5, duration: 0.2 });
  });
  
  region.addEventListener('mouseleave', () => {
    if (isExpanded) return;
    gsap.to('.map-region', { scale: 1, opacity: 1, duration: 0.2 });
  });
});

5. 封装重置函数

把重置逻辑抽成函数，方便多处调用：

function resetAllRegions() {
  isExpanded = false;
  if (currentActiveElement) {
    currentActiveElement.classList.remove('active');
    currentActiveElement.style.pointerEvents = 'auto'; // 恢复hover事件
    currentActiveElement = null;
  }
  gsap.to('.map-region', { scale: 1, opacity: 1, duration: 0.3 });
}

关键注意事项 #

• 点击事件必须加stopPropagation()，否则会触发document的重置逻辑
• 跳转链接建议通过元素的data-*属性存储，方便动态获取
• 如果你的SVG元素是<path>或其他标签，只需调整选择器和属性获取方式即可

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