Bootstrap 5模态框中img标签内SVG超链接无法点击问题

问题原因 #

用<img>标签引入SVG文件时，浏览器会将SVG当作静态图片资源处理，SVG内部的<a>等交互元素会被完全忽略——这就是为什么单独打开SVG时超链接正常，放到模态框的<img>里却无法响应鼠标事件的原因。你之前设置的pointer-events仅针对模态框容器，无法突破<img>标签的限制。

解决方案 #

替换<img>标签为<object>标签，让浏览器正确解析SVG内部的交互元素：

修改后的HTML代码：

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-xl">
    <div class="modal-content">
      <div class="modal-body">
        <object data="drawing.svg" type="image/svg+xml" style="width:100%;height:auto;"></object>
      </div>
    </div>
  </div>
</div>

额外说明 #

• 若需要更灵活的控制，也可以直接把SVG代码嵌入到模态框的<div class="modal-body">中，内部超链接同样能正常工作。
• 无需保留pointer-events: all !important;这条CSS规则，直接移除即可，避免引发不必要的样式冲突。

内容的提问来源于stack exchange，提问作者sky-prince-gamer