Chrome中SVG内链接忽略<base>标签问题及解决办法咨询

问题原因 #

Chrome与Firefox对HTML <base> 标签的作用范围处理存在实现差异：

• 普通HTML <a> 元素属于HTML命名空间，Chrome会正确应用<base>的target配置；
• 但SVG内部的<a>元素属于SVG命名空间，Chrome目前未将HTML的<base>规则跨命名空间应用到SVG元素上，导致这类链接仍在iframe内打开。
  Firefox则实现了跨命名空间的<base>生效逻辑，因此两类链接都能正确跳转到父窗口。

可行解决办法 #

1. 直接给SVG内的<a>设置target="_parent" #

这是最直接的方案，适合静态SVG或链接数量不多的场景：

<svg width="200" height="50">
  <a href="/some-page" target="_parent">
    <text x="10" y="30">SVG Link</text>
  </a>
</svg>

2. JavaScript批量设置SVG链接的target属性 #

如果SVG是动态生成或包含大量链接，可以在iframe页面中添加脚本批量处理：

// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  // 遍历所有SVG内的<a>元素
  document.querySelectorAll('svg a').forEach(svgLink => {
    svgLink.setAttribute('target', '_parent');
  });
});

若通过<object>或<embed>引入外部SVG，需监听SVG加载完成事件后再执行上述代码。

3. 监听点击事件手动跳转 #

通过阻止默认跳转行为，手动调用父窗口的location实现跳转，适合需要自定义跳转逻辑的场景：

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('svg a').forEach(svgLink => {
    svgLink.addEventListener('click', (e) => {
      e.preventDefault();
      const href = svgLink.getAttribute('href');
      if (href) {
        window.parent.location.href = href;
      }
    });
  });
});

内容的提问来源于stack exchange，提问作者Jacket B.