Question

我有一个徽标，我需要它在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>

Answer 1

将<a>标记添加到SVG。不是你的HTML。

<svg xmlns="http://www.w3.org/2000/svg" ...>
 <a xlink:href="my_url.html">
    <path d="..."/>
 </a>
</svg>

您需要使用<object>元素来嵌入SVG。 <img>无效。

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

Answer 2

如果您的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图像形状。

Answer 3

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

如何使img标签内的svg路径可点击？

3 个答案: