将图片与SVG设为100%宽度后，SVG内锚点链接失效求助

核心问题：锚点区域超出SVG可视范围 #

你的SVG viewBox 设置为 0 0 100 100，意味着整个SVG的可视画布仅为100x100的尺寸，但你定义的锚点矩形（如x="150"、x="240"）坐标远远超出该画布范围。当SVG设为100%宽度后，这些锚点实际处于可视区域之外，自然无法被点击触发。

同时存在两个辅助问题：

• <image>标签未设置高度，可能导致SVG布局异常，打乱锚点与图片的位置映射
• preserveAspectRatio="none"会强制拉伸SVG适配容器，进一步破坏锚点和图片区域的对应关系

修复步骤 #

1. 修正SVG的viewBox匹配图片实际尺寸 #

先确认目标图片的真实宽高（根据锚点坐标推测为360x330），将SVG的viewBox改为对应尺寸：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" width="100%" viewBox="0 0 360 330" preserveAspectRatio="xMidYMid meet">

• preserveAspectRatio="xMidYMid meet"可保持图片比例，避免拉伸变形

2. 确保图片元素正确填充SVG画布 #

给<image>标签添加高度属性，同时设置preserveAspectRatio：

<image xlink:href="https://demo.thebrandchimp.com/cocofit/mobile/menu.gif" style="width:100%;height:100%" preserveAspectRatio="xMidYMid meet"></image>

3. 验证锚点坐标匹配图片区域 #

若图片实际尺寸与假设的360x330不符，需调整所有<rect>的x/y/width/height值，确保它们准确覆盖图片上的可点击区域，且处于viewBox范围内。

修复后完整代码示例 #

<figure style="width:100%;position:relative;top:12%;margin-left:-1%">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" width="100%" viewBox="0 0 360 330" preserveAspectRatio="xMidYMid meet">
    <image xlink:href="https://demo.thebrandchimp.com/cocofit/mobile/menu.gif" style="width:100%;height:100%" preserveAspectRatio="xMidYMid meet"></image>
    <a id="myBtns" xlink:href="#">
      <rect x="30" y="20" fill="#fff" opacity="0" width="90" height="90"></rect>
    </a>
    <a id="myBtns2" xlink:href="#">
      <rect x="150" y="20" fill="#fff" opacity="0" width="90" height="90"></rect>
    </a>
    <a id="myBtns3" xlink:href="#">
      <rect x="240" y="20" fill="#fff" opacity="0" width="90" height="90"></rect>
    </a>
    <a id="myBtns4" xlink:href="#">
      <rect x="30" y="120" fill="#fff" opacity="0" width="90" height="90"></rect>
    </a>
    <a id="myBtns5" xlink:href="#">
      <rect x="150" y="120" fill="#fff" opacity="0" width="90" height="90"></rect>
    </a>
    <a id="myBtns6" xlink:href="#">
      <rect x="240" y="120" fill="#fff" opacity="0" width="90" height="90"></rect>
    </a>
    <a id="myBtns7" xlink:href="#">
      <rect x="30" y="220" fill="#fff" opacity="0" width="90" height="90"></rect>
    </a>
    <a id="myBtns8" xlink:href="#">
      <rect x="150" y="220" fill="#fff" opacity="0" width="90" height="90"></rect>
    </a>
    <a id="myBtns9" xlink:href="#">
      <rect x="240" y="220" fill="#fff" opacity="0" width="90" height="90"></rect>
    </a>
  </svg>
</figure>

额外调试提示 #

• 临时将锚点的opacity改为0.3，可直观查看锚点是否正确覆盖图片目标区域，调试完成后改回0即可
• 移动端测试时，确认SVG容器未被其他元素遮挡，避免点击事件被拦截

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