3

私は以下のように書かれた scg 要素を持っています。

<svg height="300px" width="600px" xmlns="http://www.w3.org/2000/svg">
  <g id="100" onmouseout="outg()" style="stroke-width: 1;fill: rgb(255, 200, 200);">
   <rect height="25" rx="10" ry="10" style="fill: rgb(257, 87, 87);" width="160" x="330" y="35" />
    <text style="stroke: rgb(0, 0, 0);stroke-width: 1;" x="390" y="53" >ABC</text>
  </g>
</svg>

マウス ポインターが四角形の内側または外側 (ただし、svg の内側) にあるかどうかを判断するにはどうすればよいですか。「rect」、「g」、「text」の onmouseout イベントの単純なアラートで JavaScript 関数を呼び出そうとすると、少し混乱します。四角形内でテキストをポイントすると、技術的には四角形が終了し、テキストが入力されます。

マウス ポインターが四角形から完全に外れていることを確認する必要があります。これは、四角形内のテキスト領域に交差したときや、テキスト領域から四角形に入ったときではなく、1 回だけ発生する必要があります。

4

1 に答える 1