web-dev-qa-db-ja.com

SVGサークルにマウスオーバー

私はSVGに非常に慣れていないので、これが基本的な質問である場合はご容赦ください。

画面上に円を描き、ユーザーが各円の上にマウスを置くと応答するようにします。

私が知ることができることから、svgでマウスイベントをリッスンするとき、実際にはシェイプではなくキャンバス全体でマウスイベントをリッスンしています。

シェイプのイベントを処理する場合は、D3などのライブラリを使用する必要があります。

マウスポインターが特定の円の上を通過したときにトリガーされるmouseOverイベントをリッスンすることは可能ですか？

javascriptcanvassvgd3.js
9
Andrés Nava - Azure

これにはライブラリは必要ありません。次のSVGがあるとします。

<svg width="500" height="500">

  <circle id="circle1" cx="50" cy="50" r="20" fill="red"/>
  <circle id="circle2" cx="150" cy="50" r="20" fill="green"/>

</svg>

CSSまたはJavaScriptを使用して、これらの円をマウスに関連する何らかの方法で変更することができます。

CSSでの単純なホバーでは、次のようなことができます。

#circle1:hover {
  fill: blue;
}

または、次のようなJavaScriptマウスイベント：

document.getElementById('circle2').addEventListener('click', function(e) {
    e.currentTarget.setAttribute('fill', '#ff00cc');
});

ここにあなたがチェックするためのデモがあります： http://codepen.io/ZevanRosser/pen/bdYyLp

7
Zevan

これをsvgだけにして、ブラウザで開いて結果を確認できるようにする場合（Zevanの回答はsvgに埋め込むことができます）、次のようなものを使用します。

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500">
  <circle id="circle1" cx="50" cy="50" r="20" fill="red" onmouseover="evt.target.setAttribute('fill', 'blue');" onmouseout="evt.target.setAttribute('fill','red');"/>
  <circle id="circle2" cx="150" cy="50" r="20" fill="green" onmouseover="evt.target.setAttribute('fill', 'blue');" onmouseout="evt.target.setAttribute('fill','green');"/>
</svg>

共有されるCSSオプションはよりクリーンですが、このパターンは、特に実際にプロパティを変更する前にユーザーが円を「一時停止」する時間を把握するための関数が必要な場合に、将来のマウス処理の柔軟性を高める可能性があります。

2
Jordan Read

これを試して...

<circle onMouseMove={() => console.log('foo') }/>
0
Bimal Grg