レイヤードSVGインタラクティビティ - のJavaScriptライブラリ

Question

は、私はこのようなイラストを持っていると私は、ユーザーが画像内の個々の人の上に置いたりクリックしたときに、ブラウザにインタラクティビティを追加してみたいと思います。 SVGやレイヤーを含むPSDをインポートしてブラウザの個々のオブジェクトに変換できる優れたJavascriptライブラリがありますか？あるいはHTML5のキャンバスかもしれません。

Answer 1

ライブラリの質問は、回答の主張が強すぎるため、通常SOには適していませんが、ネイティブHTML5 SVGサポート+ CSS + JavaScriptイベントハンドラおよびライブラリなしでこの問題を実際に解決できます。

document.getElementById("waldo").addEventListener("click", function() { 
 
    console.log("Waldo clicked") 
 
});

svg #waldo:hover { 
 
    fill: red; 
 
}

Hover over and click the blue box with id = waldo: 
 
<svg width="500" height="500" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" version="1.1"> 
 
    <rect x="0" y="0" width="100" height="100" fill="green" /> 
 
    <rect id="waldo" x="70" y="70" width="100" height="100" fill="blue" /> 
 
    <rect x="160" y="30" width="100" height="100" fill="yellow" /> 
 
</svg>

PS：私は、ワルドが見つかりました：そのようなオーバーまたはCホバリングなどのイベントハンドラを含む