在具有不規則形狀的圖像上製作可點擊區域

Question

我正在嘗試在印度地圖上爲某個項目製作一個圖像地圖，其中單擊每個州時應該會導致另一個頁面。爲此我計劃使用地圖和區域標籤。問題是每個狀態的形狀不是一個普通的數字，需要太多的座標，而且可點擊的區域可能會相交。

我想知道是否有另一種方式來實現這一任務 this is the image of the map i would like to work on

Answer 1

您可以使用SVG的實現這一目標。我在下面創建了一個Codepen，並以印度幾個州的樣本爲例。

CODEPEN

CSS

<svg viewBox="0 0 300 200"> 
<a xlink:href="#"> 
    <path id="IN-HP" class="land" d="M143.6,94.2l0/> 
</a> 
</svg> 

抓住印度的免費SVG拷貝這裏：https://www.amcharts.com/svg-maps/