SVG画像のさまざまな部分をクリック可能にする

Question

私はネットを検索し、SVG形式に変換すると画像がクリック可能になることを発見しました。 例えば以下の画像は、私は事前にあなたに感謝し、あなたがこれをやって行くと私を助けることができる任意のアプリが存在しないか、クリック可能であることを、すべてのボックスを必要とする

enter image description here

Answer 1

あなたはでこれを行うことができ

SVG。しかし、おそらく、HTML image mapを使うほうがはるかに簡単です。

Answer 2

SVG自体を編集できる場合は、各要素をアンカータグでラップすることができます。

<svg> 
 
    <a href="www.link1.com"> 
 
    <rect x="10" y="10" width="60" height="50" fill="#ddd"> 
 
    </a> 
 
    <a href="www.link2.com"> 
 
    <rect x="75" y="10" width="60" height="50" fill="#ddd"> 
 
    </a> 
 
</svg>

そうしないと、各要素にクリックハンドラを追加するためにJavascriptを使用することができます。あなたはボックスをクリックしたときに起こるしたいです何

document.getElementById("rect1").addEventListener("click", function() { 
 
    window.open('www.link1.com') 
 
}); 
 

 
document.getElementById("rect2").addEventListener("click", function() { 
 
    window.open('www.link2.com') 
 
});

<svg> 
 
    <rect id="rect1" x="10" y="10" width="60" height="50" fill="#ddd"/> 
 
    <rect id="rect2" x="75" y="10" width="60" height="50" fill="#ddd"/> 
 
</svg>