如何在SVG文件中通过链接引用HTML的id？

这问题我做项目时也踩过坑！核心原因是SVG里的<a>标签默认会把锚点指向SVG文件自身，而不是嵌入它的HTML页面。给你几个实用的解决办法：

• 方法一：用JavaScript强制跳转（通用所有场景）
  直接修改SVG里的链接元素，通过onclick事件手动控制父页面的锚点，并阻止默认行为：

  <a id="a295" class="js-scroll-trigger" onclick="window.parent.location.hash='#portfolio'; return false;">
    <ellipse class="scroll-down" fill="#ffffff" fill-opacity="0" id="path3905" cx="726.10693" cy="731.57501" rx="24.696276" ry="24.8..."></ellipse>
  </a>
  

  要是你的SVG是直接内嵌在HTML里（不是外部引入），把window.parent换成window就行。return false是为了阻止SVG默认的锚点跳转行为。

• 方法二：给链接加target="_top"（仅SVG内嵌HTML场景）
  如果你的SVG是直接用<svg>标签写在HTML里的，不用写JS，只要给<a>标签加个target="_top"属性就行：

  <a id="a295" class="js-scroll-trigger" href="#portfolio" target="_top">
    <ellipse class="scroll-down" fill="#ffffff" fill-opacity="0" id="path3905" cx="726.10693" cy="731.57501" rx="24.696276" ry="24.8..."></ellipse>
  </a>
  

  这个属性会让锚点跳转作用在顶级HTML页面上，非常简洁高效。

• 方法三：HTML中监听SVG内部点击（外部引入SVG场景）
  要是你是用<object>或<iframe>引入外部SVG文件的，可以在HTML里写JS来拦截SVG内部的点击事件：
  先给引入SVG的元素加个ID：

  <object id="my-svg" data="svgname.svg" type="image/svg+xml"></object>
  

  然后添加事件监听：

  document.getElementById('my-svg').addEventListener('load', function() {
    const svgDoc = this.contentDocument;
    const scrollLink = svgDoc.getElementById('a295');
    scrollLink.addEventListener('click', function(e) {
      e.preventDefault(); // 阻止SVG默认跳转
      window.location.hash = '#portfolio'; // 跳转到HTML页面的锚点
    });
  });
  

  这个方法能完美解决外部SVG的锚点跳转问题，还能保留你原来的类名和样式。

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