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

我有我需要它是在SVG一个标志，它被插在一个页面像这样：如何让img标签内的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>

来源

2017-09-08 John R

任何JS小提琴请！ – Swapna

图片不是互动的，你不能做你想要的一个img标签。如果您只想将SVG的一部分点击，请使用对象标记，然后编辑img/twitter.svg文件以将其包含的路径用标记封装起来。 –

-3

打开在Adobe Dreamweaver的那个页面，选择映射工具。选择设计模式创建区域，无论您想要点击您将获得coord属性。

来源

2017-09-08 05:19:14 PKumar15

-1

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

来源

2017-09-08 06:32:46

将<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>

来源

2017-09-08 14:03:07

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

回答

相关问题