svg - 別の透明な形状によってブロックされた形状のマウスオーバー イベントをキャプチャする

Question

いくつかの透明な重なり合った楕円があります（以下に示すように）。

マウスオーバーで各楕円を強調表示しますが、他の楕円がそれらの上に描画されているため、多くの楕円を強調表示することはできません。

svg に関する私の限られた知識から、3 つの解決策があります。

• 各楕円の端でのみマウスオーバーを検出する方法を見つけてください。
• ベジエ曲線を使用して楕円を描画します。
• 楕円の描画を並べ替えます。これを行う方法がわかりません。または、これらすべての形状を考慮して、この方法で解決できるかどうかさえわかりません。

どんな助けでも大歓迎です！

Answer 1

svg のターゲット領域は、画面上に描画されているものだけです。したがって、理論的には、楕円はストローク上でのみホバー可能にする必要があります。そうでない場合は、none(おそらくrgba(0,0,0,0)?) 以外のもので塗りつぶしを設定している可能性があります。

g楕円の代わりに要素にホバーを設定することもできます。

ここで例を見ることができます: http://jsfiddle.net/r65E9/

ellipse {
  stroke: #fff;
  stroke-width: 1;
  fill: none;
}

ellipse:hover {
  stroke: #f66;
}