6

IMG要素の上にSVGがあり、その上に図形を描画する必要があるWebページがあります。

描画はブラウザ間で正しく実行されます。ただし、イベントの受信に関しては、IMGは実際にはイベントをブロック/受信するように見えます（イベント自体がアタッチされていないため、明示的に停止されません）。

例： http：
//jsfiddle.net/UvRVX/12/ （マークアップを修正、円を追加）FF、Chrome：「svgreceived mousedown」（正しい）
Opera、IE9：-nothing-（正しくない）

CSSの可視性または表示によって画像が非表示になっている場合：none、画像は機能し始めますが、もちろんこの方法は使用できません。

イベントを受信できるようにSVG要素をIMG要素の上に配置するにはどうすればよいですか？（Opera、IE9）
ありがとうございます

4

3 に答える 3

6

これが機能しない理由は2つあります。

1.svgが空です。
高さと幅を指定しても、実際に図形を追加するまで実際のサイズを割り当てないブラウザもあると思います。そこに空のrectを配置することで、これを回避できます。

<rect x="0" y="0" width="300" height="300" stroke="black" stroke-width="0" fill="none"></rect>

2.pointer-eventsプロパティのため。あなたはここでもっと読むことができます。デフォルトの値はですvisiblePaintedので、ChromeとFFがイベントの通過を許可する理由がわかりません。これをに設定する必要があります"all"

また、htmlにも注意してください、それはひどくfromattedです。

修理：

http://jsfiddle.net/mihaifm/ptLrB/2/

于 2012-04-10T19:54:21.803 に答える
2

円の塗りつぶしがに設定されているため、OperaとIE9は実際には正しいですnone。サークルのストロークをクリックすると、すべてのブラウザにアラートが表示されます。円の塗りつぶしは透明なので、円の内側をクリックすると画像が表示されます。

円に追加pointer-events="visible"して、円の塗りつぶしの値を無視します。

サンプルコード/JSFiddle

ポインタイベントのSVG仕様から：

見える

'visibility'プロパティがvisibleに設定されていて、ポインタが要素の内部（つまり塗りつぶし）または周囲（つまりストローク）の上にある場合、指定された要素をポインタイベントのターゲット要素にすることができます。'fill'および'stroke'の値は、イベント処理に影響を与えません。

于 2012-05-24T06:25:07.277 に答える
1

興味深いバグ。非html要素（ここ<svg>では:)は、z-indexcss値に関しては正しく動作しないようです。

それを修正するために、私はそれを別のdivで単純にラップしました：http：//jsfiddle.net/UvRVX/6/

ただし、svgに何かを描画すると、これらの要素は正しく表示され、イベントも受信します：http: //jsfiddle.net/UvRVX/7/（赤い四角をクリックするとアラートが表示されますが、周囲の余白には表示されません） 。

于 2012-04-10T19:48:30.817 に答える