Html 如何使img标记内的svg路径可单击？

我有一个徽标，我需要它在SVG中，它被插入到一个页面中，如下所示：

<div>
  <img class="footer-logo" src='assets/logo.svg'>
</div>

我希望徽标是可点击的，我尝试了下面的方法，但问题是这样做会使包含svg的整个正方形可点击，我只希望svg的路径可点击。我怎样才能做到这一点？这就是我试过的

<a href="#" class="svg">
  <object data="img/twitter.svg" type="image/svg+xml" class="mailicon">
  </object>
 </a>

在AdobeDreamweaver中打开该页面并选择映射工具。 选择设计模式 创建你想要点击的区域 您将获得coord属性

---

如果您的SVG文件是原始文件，则只需使用以下内容：

<svg height="210" width="400">
<a href="#">
  <path d="M150 0 L75 200 L225 200 Z" />
</a>
</svg>

或者，如果您有一个对象，请使用此

<a href="" style="display: block; z-index: 1;">
    <object data="https://upload.wikimedia.org/wikipedia/commons/a/a0/Circle_-_black_simple.svg" style="z-index: -1; pointer-events: none;" />
</a>

可单击区域中的方形结果基于svg文件形状，而不是svg图像形状。

添加

您需要使用

元素来嵌入SVG。

将不起作用

<object data="assets/logo.svg" type="image/svg+xml"></object>

任何JS小提琴都可以！图像不是交互式的，你不能用img标签做你想做的事情。如果您只希望SVG的一部分是可单击的，请使用对象标记，然后编辑img/twitter.SVG文件，将其包含的路径用标记包装起来。

<object data="assets/logo.svg" type="image/svg+xml"></object>