Chrome与Edge浏览器中：如何让指向SVG内部id的:target跳转链接生效？

我之前也碰到过一模一样的情况，Chrome和Edge对SVG内部元素的锚点定位确实有兼容性坑——原生的href="#id"跳转不会自动滚动到SVG里的目标元素，甚至:target样式也可能完全不生效。下面给你几个靠谱的解决办法：

方法一：用JavaScript手动处理滚动与高亮 #

这是最稳定的方案，直接接管导航链接的点击事件，手动控制滚动和目标元素的视觉反馈：

步骤1：添加JavaScript代码 #

// 监听所有导航链接的点击事件
document.querySelectorAll('nav a').forEach(link => {
  link.addEventListener('click', function(e) {
    // 阻止默认的锚点跳转行为
    e.preventDefault();
    // 提取目标元素的ID
    const targetId = this.getAttribute('href').slice(1);
    // 找到SVG内部的目标元素
    const targetElement = document.getElementById(targetId);
    
    if (targetElement) {
      // 滚动到目标元素位置，支持平滑滚动
      targetElement.scrollIntoView({
        behavior: 'smooth',
        block: 'start' // 让元素顶部对齐视口顶部
      });
      
      // 模拟`:target`的高亮效果（可选）
      // 先移除其他元素的高亮状态
      document.querySelectorAll('#Artboard [id]').forEach(el => {
        el.classList.remove('targeted');
      });
      // 给当前目标元素添加高亮类
      targetElement.classList.add('targeted');
    }
  });
});

步骤2：添加CSS高亮样式 #

如果需要模拟:target的视觉反馈，在CSS里添加：

#Artboard rect.targeted {
  stroke: #ffffff;
  stroke-width: 4px;
  /* 可以根据需求调整样式，比如添加阴影、改变透明度等 */
}

方法二：调整SVG容器的滚动行为 #

如果你的SVG很长（比如例子里高度达到2224px），可以把SVG放在一个带滚动的容器里，让浏览器正确识别内部元素的位置：

步骤1：修改HTML结构 #

把SVG包裹在一个div容器中：

<div class="svg-container">
  <svg xmlns="http://www.w3.org/2000/svg" width="656" height="2224" viewBox="0 0 656 2224">
    <!-- 内部矩形元素保持不变 -->
  </svg>
</div>

步骤2：添加CSS样式 #

.svg-container {
  width: 100%;
  max-width: 656px;
  overflow-y: auto;
  height: 100vh; /* 或者设置固定高度，比如800px */
}

这种方法可以让浏览器把SVG容器当作独立的滚动区域，原生锚点跳转大概率会正常工作，但兼容性不如JS方案稳定，适合结构简单的场景。

为什么原生:target会失效？ #

Chrome和Edge对SVG内部元素的锚点定位逻辑和其他浏览器有差异：当目标元素在SVG内部时，浏览器不会自动计算它相对于整个页面的偏移量，导致滚动行为不生效；部分情况下，:target伪类也无法正确匹配SVG内部的元素，这是浏览器对SVG标准实现的细节差异导致的。

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