如何在SVG图像文件中添加可点击链接？代码实现问题求助

存在的问题 #

• <a> 标签放置位置错误且没有包裹可点击的图形元素，当前你的<a>标签放在所有路径元素之后，没有包含任何可触发点击的内容
• 缺少</a>闭合标签，标签结构不完整
• 若要兼容标准SVG链接规范，也可以直接使用href属性（现代浏览器已原生支持，无需额外依赖xlink前缀，若要兼容老旧浏览器可保留xlink:href同时添加xmlns:xlink="http://www.w3.org/1999/xlink"到svg标签属性中）

修复方案 #

方案1：在SVG内部使用原生SVG链接（仅点击图形区域触发跳转） #

把<a>标签包裹住你需要可点击的path元素，补全闭合标签，代码示例：

<div class="apps">
  <svg id="app-button" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
    <a href="https://workspace.google.com/">
      <path d="M0 0h24v24H0V0z" fill="none" />
      <path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z" />
    </a>
  </svg>
</div>

方案2：使用外层HTML标签包裹整个SVG（整段SVG区域都可点击） #

如果不需要精细控制SVG内部的点击区域，直接在外层套HTML的标签更简单：

<div class="apps">
  <a href="https://workspace.google.com/">
    <svg id="app-button" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
      <path d="M0 0h24v24H0V0z" fill="none" />
      <path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z" />
    </svg>
  </a>
</div>