嘿，这个问题我刚好碰到过！核心原因其实是：当SVG通过<img>标签（包括<picture>里的<img>或<source>）加载时，浏览器会把它当作静态图像处理，SVG内部的<a>等交互元素是不会生效的——这就是为什么你直接打开SVG文件点击正常，但嵌入到<picture>里就不行的原因。

先给你说结论：没有简便的方法让<picture>支持SVG内部的点击，因为<picture>最终还是依赖<img>来渲染内容，而<img>本身就不支持SVG交互。不过有几个替代方案可以实现「自适应横竖屏切换+可点击SVG」的需求，我给你列两个最实用的：

方案1：用<object>标签+JS监听屏幕方向 #

这个方法逻辑简单，也能保留SVG的交互性：

步骤1：HTML结构 #

把原来的<picture>换成<object>标签：

<object id="adaptive-svg" type="image/svg+xml" data="spong-portrait.svg" width="100%"></object>

步骤2：添加JS逻辑监听方向变化 #

我们需要监听屏幕方向切换或者窗口大小变化，动态替换<object>的data属性：

const svgObject = document.getElementById('adaptive-svg');

// 定义切换SVG的函数
function switchSvgByOrientation() {
  const isLandscape = window.matchMedia('(orientation: landscape)').matches;
  svgObject.data = isLandscape ? 'spong-landscape.svg' : 'spong-portrait.svg';
}

// 页面加载时先执行一次，确保初始状态正确
switchSvgByOrientation();

// 监听屏幕方向变化（移动端）
window.addEventListener('orientationchange', switchSvgByOrientation);
// 监听窗口大小调整（桌面端拖拽窗口改变横竖比例）
window.addEventListener('resize', switchSvgByOrientation);

这样<object>加载的SVG会完整保留所有交互功能，点击锚点完全正常。

方案2：内联SVG+CSS媒体查询（纯前端无JS） #

如果你的SVG代码不算特别长，这个纯CSS方案更优雅，不需要JS：

步骤1：把两个SVG内联到HTML里 #

直接把竖屏和横屏SVG的代码写进HTML，给它们分别加类名：

<style>
  .svg-container svg {
    width: 100%;
    display: block;
  }
  
  /* 默认显示竖屏SVG */
  .svg-landscape {
    display: none;
  }
  
  /* 横屏时切换显示横屏SVG */
  @media (orientation: landscape) {
    .svg-portrait {
      display: none;
    }
    .svg-landscape {
      display: block;
    }
  }
</style>

<div class="svg-container">
  <!-- 竖屏SVG内容 -->
  <svg class="svg-portrait" viewBox="0 0 400 600" xmlns="http://www.w3.org/2000/svg">
    <!-- 这里放你的竖屏SVG代码，包括可点击的<a>标签 -->
    <a href="#some-link">
      <circle cx="200" cy="300" r="50" fill="red" />
    </a>
  </svg>

  <!-- 横屏SVG内容 -->
  <svg class="svg-landscape" viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg">
    <!-- 这里放你的横屏SVG代码，包括可点击的<a>标签 -->
    <a href="#another-link">
      <rect x="250" y="150" width="100" height="100" fill="blue" />
    </a>
  </svg>
</div>

这个方案的好处是不需要JavaScript，完全靠CSS媒体查询控制显示，内联的SVG交互性完全没问题，而且响应速度更快。唯一的缺点是如果SVG比较大，会让HTML文件体积变大，你可以根据实际情况选择。

另外，顺便提一下：你原来的<picture>代码有个小错误——<picture>标签不能自闭合（<picture title="spong" />是错的），正确的写法是把<source>和<img>放在<picture>标签内部，但即使修正了这个语法问题，依然解决不了SVG锚点点击的问题，因为本质还是<img>加载SVG的限制。

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