SVGマスターへの道

SVG要素へのイベントリスナーの追加

HTML要素と同じように、SVG要素にもJavaScriptを使ってイベントリスナーを登録し、特定のアクションが起きた時に関数を実行させることができます。よく使われるイベントには以下のようなものがあります：

• click: 要素がクリックされたとき。
• mouseover / mouseenter: マウスカーソルが要素の上に乗ったとき。
• mouseout / mouseleave: マウスカーソルが要素の上から離れたとき。
• mousedown / mouseup: マウスのボタンが押された/離されたとき。
• mousemove: マウスが要素上で動いたとき。

イベントリスナーは、element.addEventListener('イベント名', 実行する関数); のようにして登録します。まずはSVG要素を document.getElementById() などで取得しましょう。

// JavaScriptの例 (下のスクリプトタグ内で実際に動作)
// const circle = document.getElementById('eventCircle');
// const rect = document.getElementById('eventRect');
// const output = document.getElementById('eventDemoOutput');

// circle.addEventListener('click', () => {
//   const newColor = circle.getAttribute('fill') === 'skyblue' ? 'salmon' : 'skyblue';
//   circle.setAttribute('fill', newColor);
//   output.textContent = '円がクリックされました！ 色: ' + newColor;
// });

// rect.addEventListener('mouseenter', () => {
//   rect.setAttribute('opacity', '0.7');
//   output.textContent = '矩形にマウスが乗りました！';
// });
// rect.addEventListener('mouseleave', () => {
//   rect.setAttribute('opacity', '1');
//   output.textContent = '矩形からマウスが離れました！';
// });

SVG DOM (Document Object Model) の操作

JavaScriptを使ってSVG要素の属性を動的に変更したり、新しい要素を作成・追加・削除したりすることができます。

• 属性の取得と設定: element.getAttribute('属性名'), element.setAttribute('属性名', '新しい値')
• スタイルの変更: element.style.プロパティ名 = '値'; (CSSプロパティとしてアクセス)
• 要素の作成: document.createElementNS('http://www.w3.org/2000/svg', '要素名') (注意: SVG要素は名前空間を指定する必要があります)
• 要素の追加: 親要素.appendChild(新しい要素);
• 要素の削除: 親要素.removeChild(削除する要素);

ドラッグ＆ドロップの実装

SVG要素をマウスでドラッグして移動させるには、mousedown, mousemove, mouseup イベントを組み合わせます。mousemove イベントの中で、マウスの移動量に合わせて要素の transform="translate(x,y)" 属性を更新するのが一般的な方法です。

マウスイベントから得られる座標 (clientX, clientY など) はスクリーン座標なので、SVG内部の座標系に変換する必要があります。SVGElement.getScreenCTM() メソッドや SVGPoint オブジェクトが役立ちます。

pointer-events 属性

CSSの pointer-events プロパティは、SVG要素がマウスイベント（クリック、ホバーなど）のターゲットになるかどうかを制御します。これは特に、要素が重なっている場合や、見た目だけ存在して操作はさせたくない場合に便利です。

主な値:

• auto / visiblePainted: (デフォルト) 見えている部分がイベントの対象。
• none: 要素はマウスイベントを一切受け付けません。イベントはその下にある要素に「透過」します。
• 他にも visible, painted, fill, stroke など、より細かく制御する値があります。

まとめ

JavaScriptとSVG DOMを組み合わせることで、SVGは単なる静的な画像を超え、ユーザーと対話するダイナミックなコンポーネントへと進化します。イベントリスナーでユーザーの操作を捉え、DOM操作でSVGの見た目や構造をリアルタイムに変更することで、多彩なインタラクションが実現可能です。

ドラッグ＆ドロップのような高度な操作や、pointer-eventsによるイベント制御も、SVGのインタラクティビティを高める上で重要なテクニックです。D3.jsやGSAPのようなライブラリは、これらの実装をさらに容易にしてくれます。

次は、「プロの技 - レスポンシブと最適化」で、SVGを様々な環境に対応させ、パフォーマンスを向上させるための高度なテクニックについて学びます。