ポインター イベントclickと、幅/高さでmousemove定義され、レンダリングされたコンテンツ ボックスの外側にある形状をキャプチャする必要があります。<SVG>overflow: visible
この例では、circleが適切にレンダリングされ、現在の Chrome、FireFox、および IE11 は、eg があるかどうかに関係なく、オーバーフローした部分でポインター イベントをキャプチャしますpadding。ただし、Safari 10.0.1 OS X ではpadding、 、border、および/またはを使用してもmargin、可能な 8 つの順列のどれを使用しても、ポインター イベントは登録されません。
<SVG>Safari は、コンテンツ ブロック内にある場合にのみクリックを発します: https://jsfiddle.net/monfera/n1qgd5h4/5/
オーバーフロー領域にあるポインター イベントをリッスンする方法はありますか? Safari が非対応 (バグ) なのか、他のブラウザが緩いのか、まだ確認していません。
より大きな要素を作成するという回避策に頼ることはできますが、それでは<SVG>ボックス モデルと CSS の利点の多くが無効になりoverflow、ブラウザーが行うべきことを JS で手動でやり直すことになります。