SVGのZ字型パスのインタラクティブ領域

SVGをAjax経由でロードし、Javscriptを介して相互作用するコードがあります。 SVGはパス( 'ワイヤ')とテキスト(ワイヤのラベル)である配線図を表します。パスとテキストオブジェクトはノードの下にグループ化されています。各ノードにはノードも含まれています。クリックに反応できるdescノードにIDを使用します。選択されたワイヤの詳細をポップアップすることによって、

一般的にシステムは完璧に動作しますが、時には戻ってくるSVGのクリックイベントは「別のワイヤー」に属するようです。この場合のジオメトリの例を次に示します。

             ---------------
             -
             -
     ....... -.....Wire1....
             -
             -
             -
 ------Wire2--

(私はこれがはっきりしていることを願って - Wire1は水平に走り、Wire2はZigzagの形で、Wire1を横切るように垂直に走る)

このジオメトリでは、次のような動作が見られます。

  • Click on Wire1 Path --> event points at Wire1 Path

    Click on Wire1 Text --> event points at Wire2 Path (!Wrong)

    Click on Wire2 Path --> event points at Wire2 Path

    Click on Wire2 Text --> event points at Wire2 Text

zオーダーの変更(Wire2をSVGファイルに書き込んだ後のWire1の書き出し)は効果がありません。

一連の短いパス(1つの長いパスではなく)でワイヤを表現すると、この問題は解決されますが、ファイルサイズが大きくなります(これらの配線図は大量です)。

1つのSVGブラウザではこれがバグの1つだったと思いますが、Safari 5とMozillaではこれが見て取ることができます。 (私は共通のコードベースを共有していないと仮定します)。これは、ある状況下では、SVGが、Z字形のパスの「アクティブなクリック可能な領域」をその境界矩形に定義することを示唆しています。

これをどうすればコントロールできますか?任意のパスのアクティブな領域をパス自体に限定するヘッダータグ属性やその他の作業ラウンドはありますか?

0

1 答え

パスを塗りつぶしている場合(あなたの背景と同じ色でも)、これを明確に説明します。問題を示す共有できるテストケースがありますか?

0
追加された
あなたは確かに正しいです。ありがとうございました。私の同僚の一人は、このパスに定義された「塗りつぶし」があり、そのパスが背景色で塗りつぶされた「囲み矩形」内に提供されていることを示しました。私はインタラクティブ性を塗りつぶし不透明度でオフにすることができると仮定していました:0.0 - 私は他のところで働いていました。明らかにそれは不十分で、「塗りつぶし:なし」だけが実際に機能します。
追加された 著者 Tony Eastwood,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript