如何实现HTML中SVG内部可点击链接与外部<a>标签共存？

问题原因 #

• 用<object>嵌入SVG时，Chrome会为其创建独立浏览上下文，容易导致外部<a>标签被遮挡，无法正常显示；
• 用<img>嵌入SVG时，SVG会被当作静态位图处理，内部的交互链接（比如google链接）会失效。

可行解决方案 #

方案1：直接内联SVG代码（最可靠）

把生成的SVG代码直接插入HTML中，既能保留SVG内部的可点击链接，外部<a>标签也能正常显示和点击：

1. 打开test.svg文件，复制里面的全部代码；
2. 在HTML中直接粘贴SVG代码，替换原有的<object>或<img>标签；
3. 外部<a>标签可放在SVG的任意位置（前后都可以）。

示例HTML代码：

<!DOCTYPE html>
<html>
<body>
  <!-- 内联的SVG代码 -->
  <svg width="62" height="26" viewBox="0 0 62 26" xmlns="http://www.w3.org/2000/svg">
    <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 22)">
      <title>%3</title>
      <polygon fill="white" stroke="none" points="-4,4 -4,-22 58,-22 58,4 -4,4"/>
      <g id="node1" class="node">
        <title>google</title>
        <a xlink:href="https://google.com" target="_blank" xlink:title="google">
          <ellipse fill="none" stroke="black" cx="27" cy="-10" rx="23" ry="10"/>
          <text text-anchor="middle" x="27" y="-6.3" font-family="Times,serif" font-size="14.00" fill="blue">google</text>
        </a>
      </g>
    </g>
  </svg>
  <!-- 外部链接 -->
  <a href="https://stackoverflow.com/">Stackoverflow</a>
</body>
</html>

方案2：调整<object>的CSS层级

如果不想内联SVG，可以通过CSS调整元素层级，避免外部<a>被遮挡：

<!DOCTYPE html>
<html>
<style>
  .svg-object {
    position: relative;
    z-index: 1;
  }
  .external-link {
    position: relative;
    z-index: 2;
    display: block;
    margin-top: 10px;
  }
</style>
<body>
  <object class="svg-object" data="test.svg" type="image/svg+xml"></object>
  <a class="external-link" href="https://stackoverflow.com/">Stackoverflow</a>
</body>
</html>

方案3：用<iframe>嵌入SVG

通过<iframe>加载SVG，也能同时保留内部链接和外部<a>的正常显示：

<iframe src="test.svg" width="62" height="26" frameborder="0"></iframe>
<a href="https://stackoverflow.com/">Stackoverflow</a>

总结 #

优先推荐内联SVG的方式，它不需要额外处理层级或浏览上下文问题，兼容性和可靠性都最好。

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