1

私のアプリは、最大 6 つの SVG 画像を階層化してインタラクティブな画像を作成します。最初の画像より下の画像をマウスでクリックできないことがわかりました。

** 編集。余分なコードとテキストが削除されました。

4

2 に答える 2

0

pointer-events属性を次のように設定することで、要素をマウスイベントに対して非依存にすることができますnone（Tinkerbinを参照）。

svg> * {不透明度：.5}

于 2012-12-12T00:29:43.717 に答える
0

本質的に、私はこのようにやりたいことをすることができません。埋め込まれた画像を積み重ねると、一番上のレイヤーだけがマウスでクリック可能になります。

イメージマップは機能しますが、いじくり回します。

clearOverlay という名前のクリア イメージを作成し、それをイメージ マップに関連付ける usemap 値を指定しました。

無料のオンライン アプリhttp://www.image-maps.comを使用して作成したイメージマップを使用すると、画像を取得して、クリッカブル ゾーンを作成し、html を生成することができました。それをクリーンアップし、onclick 関数の href 値を交換した後、コードにマップを追加しました。

次の問題は、既存の画像をオーバーレイすることでした。私は最終的に style="position:relative; top:-300px" を使用して、画像に真っ直ぐに座るように強制しました。もっと良い方法があるに違いないと確信していますが、現時点ではそれがうまくいきました。

これを行っている他の人は、clearOverlay を画像リストの最後に配置するか、css z-index を他のすべてよりも高く設定して、それが一番上にあることを確認することを忘れないでください。

これで、ユーザーがクリックした場所に応じて各 svg を操作できるスタック svg 画像ができました。5日しかかかりませんでした！私は自分でこのコーディングをちょっとやり過ぎています。

** 上記のイメージ マップは、異なるサイズの画面に合わせて拡大縮小されません。次回これを試すときは、クリックしたい領域を塗りつぶした透明な SVG を使用して実験します。

于 2012-12-12T21:34:54.953 に答える