如何讓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路徑可點擊？

回答

相關問題