第15章: スクリプティングとインタラクティビティ

15.1. はじめに

SVGコンテンツは、SVG言語の以下の機能を利用することでインタラクティブ（すなわち、ユーザーが起こすイベントに反応）にすることができます：

• ポインティングデバイス（例：マウス）によるボタン押下などのユーザー操作によって、アニメーションやスクリプトを実行できます。
• ユーザーは、特定のグラフィック要素上でマウスクリックなどの操作を行うことで、新しいWebページへのハイパーリンクを開始できます（SVGコンテンツからのリンク：‘a’要素参照）。
• 多くの場合、‘zoomAndPan’属性や‘svg’要素、ユーザーエージェントの特性により、ユーザーはSVGコンテンツをズームやパンすることができます。

本章では以下について説明します：

• イベントに関する情報（どのような状況でイベントが発生するかを含む）
• ドキュメントがズーム・パン可能かどうかの指定方法

関連情報は他の章にも記載されています：

• ハイパーリンクについてはリンクで説明されています
• アニメーションについてはSVGドキュメントのアニメーションで説明されています

15.2. サポートされるイベント

SVGの以下の側面はイベントによって影響を受けます：

• SVGドキュメントオブジェクトモデル（DOM）を使い、スクリプトでDOMイベントリスナーの追加・削除（[DOM]）ができ、イベントターゲットでイベント発生時にスクリプトを呼び出したり無視したりできます。
• SVGのアニメーション要素は、イベントに基づいて開始または終了を定義できます。

SVG 1.1で定義されていた複数のイベント（SVGLoad、SVGErrorなど）は、UI EVENTSやHTMLで定義されている同等のプレフィックスなしイベントに置き換えられました。

SVGのイベント使用に関して、より現代的な例（例えばタッチイベントとその仕様への参照など）が必要です。 デバイスの向き（orientation）イベントも参考になるかもしれません。

次の表は、この仕様で定義されているイベント、または他仕様と比較して追加要件や説明のあるイベントを示します。

最初の列のイベント名は、SVGのアニメーション要素内でアニメーションの開始・終了イベント定義に使用します。2列目のUIイベント名は、DOMイベントリスナー（[DOM]、3.6節）を定義するときに使用します。

表に記載されていないHTMLやUI Eventsで定義されたイベントについては、SVGのアニメーション要素で使用するイベントタイプ名は、各仕様のevent typeになります。

表の要件で「イベントがバブルするか」「キャンセル可能か」は、ユーザーエージェントによって生成・発行されたイベントにのみ適用されます。DocumentインターフェイスのcreateEventメソッドを使ってスクリプトから生成されたイベントの場合は、initEventメソッドでバブルやキャンセル可能にできます。

UIイベント型のイベントリスナーに渡されるパラメータの詳細は、([uievents]）や([DOM]）仕様を参照してください。他のイベント型については、この仕様の他の箇所で説明されています。

同様に、event-valueタイミング指定子は、アニメーション要素の‘begin’属性や‘end’属性で使用され、バブルまたはターゲットフェーズのイベントが要素に発行された時のみ具体的な時刻に解決されます。

15.2.1. UIイベントとの関係

SVG DOMは、UI Eventsで定義されているすべてのインターフェイスおよびイベント型、Clipboard API and eventsで定義されているイベント型と互換性があります（[uievents]、[clipboard-apis]）。

SVG名前空間のすべての要素は、これらのイベントのイベント属性をサポートしています。対応するIDLプロパティは、基底SVGElementインターフェイスに、GlobalEventHandlersと DocumentAndElementEventHandlers ミックスインを通じてそれぞれ含まれています。

SVG DOMのサポートの一環として、適合SVGソフトウェアは、これらの仕様で定義されているすべての（非廃止・非非推奨）イベント型を、関連イベントがソフトウェアの利用状況で発生する可能性がある場合にサポートしなければなりません。 ユーザー操作をサポートしないSVGソフトウェアでも、loadやerrorなど、操作なしで発火可能なイベントは実装しておくべきです。

SVGアニメーション要素（SVG Animations Level 2仕様で定義）は、追加のイベントおよびイベント属性をサポートします。 次のイベント型はアニメーションの状態変化によって発火します。

• beginEvent
• endEvent
• repeatEvent

これらアニメーションイベント用のイベント属性は、他の要素には効果がありません。

15.3. ユーザーインターフェイスイベント

インタラクティビティをサポートするユーザーエージェントでは、著者がSVGドキュメントをユーザーインターフェイスイベントに反応するよう定義することが一般的です。ユーザーイベントにはポインターイベント、キーボードイベント、ドキュメントイベントなどがあります。

UIイベントに応じて、著者はアニメーションの開始、他のWebページへのリンク、ドキュメントの一部の強調（例：ポインター下のグラフィック要素の色変更）、ロールオーバー（例：ポインター付近に隠れていたグラフィック要素を表示）、リモートデータベースと通信するスクリプトの起動などを行うことができます。

15.4. ポインターイベント

ユーザーがポインターデバイス上で行った操作によって発生するユーザーインターフェイスイベントは、ポインターイベントと呼ばれます。

多くのシステムはマウスやトラックボールなどのポインターデバイスをサポートしています。マウスを使用するシステムでは、ポインターイベントにはマウス移動やクリックなどの操作が含まれます。別のポインターデバイスの場合でも、ボタン押下などマウスクリック相当の操作を提供することで、マウスの動作をエミュレートすることが多いです。

各ポインターイベントごとに、SVGユーザーエージェントはそのイベントのターゲット要素を決定します。ターゲット要素は、イベント発生時にポインターの下にある、最上位のグラフィック要素の関連グラフィック内容です。（どの要素の関連グラフィック内容がポインターの下にあるか、またどの状況でそのグラフィック要素がポインターイベントのターゲット要素となるかの詳細は、pointer-eventsプロパティの説明を参照してください。）要素が表示されていない場合（すなわち、その要素または祖先のdisplayプロパティがnoneの場合）、その要素はポインターイベントのターゲットにはなりません。

ポインターイベントのターゲット要素が存在する場合、イベントは通常のイベントフロー（[uievents]、3.1節）に従って、その要素へ配信されます。 ‘use’要素やスクリプトで生成されたシャドウツリーの場合、イベントはDispatching Events [dom] に従う必要があります。

ポインターイベントのターゲット要素が存在しない場合、そのイベントは無視されます。

15.5. ユーザーインターフェイスイベントのヒットテストと処理順序

ヒットテスト

ポインターが指定されたグラフィック要素と交差しているかどうかを判定する処理。ヒットテストは、マウスイベントをどの要素に配信するかを決定する際や、ユーザーがポインティングデバイスを動かした場合、要素の位置・形状・その他属性が変化した場合に用いられます。ヒットテストはヒット検出またはピッキングとも呼ばれます。pointer-eventsプロパティの定義も参照してください。

ポインターデバイスと要素（または領域）のインタラクションには、次の2つの側面があります：

1. ヒットテスト：ポインターイベント（マウス移動やクリックなど）が要素のインタラクション領域内で発生したかを判定し、その後DOMイベントフローを実行する。
2. 関連する要素に対するアクションの機能的処理。

15.5.1. ヒットテスト

ポインターイベントによるヒットテストが陽性になるかどうかは、ポインターの位置、グラフィック要素のサイズと形状、およびその要素のpointer-eventsプロパティの計算値によって決まります。pointer-eventsプロパティの定義は、各種グラフィック要素のどの領域がポインターイベントに対して反応するかの詳細を説明します。

なお、‘svg’要素はグラフィック要素ではなく、適合SVG単独ファイルにおいては、最上位svg要素がポインターイベントのターゲットになることはありません（ただしイベントがこの要素までバブルすることはあります）。 ポインターイベントがグラフィック要素のヒットテストに陽性とならなかった場合は、ユーザーエージェント固有のウィンドウ動作（例：コンテキストメニュー表示やSVGドキュメント断片のズーム・パン制御など）が発生することがあります。

この仕様は、別のドキュメント内に参照または包含されて埋め込まれたSVG画像の最上位svg要素に対するポインターイベントの動作は定義しません（例：HTMLドキュメントに埋め込まれた最上位svg要素がマウスクリックイベントを受け取るかどうか）。将来の仕様でこの動作が定義される可能性はありますが、本仕様では実装依存とします。

15.5.2. イベント処理

ユーザーインターフェイスイベントのターゲットとなった要素は、要素の種類や、スクリプトイベントリスナー・CSS疑似クラス・イベントベースタイミングの宣言型アニメーションなど明示的なインタラクションがあるかどうかによって、特有のインタラクション動作を持つ場合があります。ターゲット要素へのDOMイベント配信後のユーザーインターフェイスイベント処理アルゴリズムとその順序は以下の通りです：

1. この要素で登録されたイベントハンドラがpreventDefault() DOMメソッドを呼び出した場合、この要素への処理はそれ以上行われず、イベントはイベント配信およびDOMイベントフロー処理（[uievents]）に従います；
2. 要素にタイトルや説明（‘title’など）が関連付けられており、ユーザーエージェントがその情報の表示（例：ツールチップやステータスバー表示）に対応している場合は、ポインターイベントの種類に応じて適切に情報を表示します；
3. 要素が、ポインターイベントの種類に応じた関連する動的疑似クラスセレクタ（例：:hover、:active、:focus）に一致する場合は、関連クラスのプロパティが適用されます（[CSS2]、5.11節）；
4. 要素とイベント型が、event-valueタイミング指定子を用いた宣言型アニメーションの開始・キャンセルに関連している場合は、対応するインスタンス時刻が解決され、インスタンス時刻解決による処理（例：即時開始・停止など）が実行されます；
5. 要素がハイパーリンク（例：‘a’要素の子孫）であり、ポインターイベントがそのハイパーリンクを起動する種類（例：マウスクリックなど）の場合で、ハイパーリンク遷移によってコンテンツの文脈が変化する場合（例：別ドキュメントを開く・同じドキュメント内の他の場所にポインターが移動するなど）は、この要素への処理はそれ以上行われません；
6. 要素がテキスト内容要素であり、ユーザーエージェントがテキスト選択操作（例：マウスクリック＆ドラッグやダブルクリック）として認識するイベント型の場合は、テキスト選択アルゴリズムが実行されます；
7. イベント型が、ユーザーエージェントが特別なユーザーインターフェイスコントロールの呼び出しと関連付けている種類（例：右クリックやコマンドクリックによるコンテキストメニュー表示）の場合は、ユーザーエージェント固有の動作（例：コンテキストメニュー表示やSVGドキュメント断片のズーム・パン制御など）を発動します。

15.6. ‘pointer-events’ プロパティ

状況に応じて、著者は特定のグラフィック要素がポインターイベントのターゲットになる条件を制御したい場合があります。たとえば、著者は特定の要素がポインターの位置が図形のストロークされた輪郭上にあるときだけポインターイベントを受け取るようにしたいことがあります。別の場合、著者は特定の要素がすべての状況でポインターイベントを無視し、その下にあるグラフィック要素がポインターイベントのターゲットになるようにしたい場合があります。

マスクとクリッピングの効果はpointer-eventsに関して異なります。クリップパスは幾何学的な境界であり、ある点がその境界の内側か外側か明確です。したがって、クリップされた要素のレンダリング領域上では通常通りポインターイベントを捕捉し、クリップされた領域上ではイベントを捕捉しない必要があります（clipping pathsの定義参照）。一方、マスクは二値的な遷移ではなくピクセル操作であり、完全に透明な場合とほぼ透明な場合で挙動が恣意的になりやすいです。そのため、マスクが適用された要素では、マスクがゼロ不透明度の領域でもポインターイベントを受け取る必要があります。マスクの透明部分で下の要素にポインターイベントを通したい場合は、マスクとクリッピングの組み合わせを使うことができます。

filterプロパティはポインターイベント処理に影響せず、この文脈ではfilterが指定されていないものとして扱います。

例えば、strokeがred（赤いアウトライン）で、fillがnone（内部は塗りなし）の円が、fillがblueの長方形の真上に描画されているとします。著者は、ポインターが円の輪郭上にあるときだけ円がポインターイベントのターゲットとなるようにしたいことがあります。円の内部にポインターがある場合は、下の長方形がポインターイベントのターゲット要素となるようにしたいかもしれません。

pointer-eventsプロパティは、どの条件下で要素がポインターイベントのターゲット要素となるかを指定します。これは、以下の状況での処理に影響します：

• マウスクリックなどのユーザーインターフェイスイベント
• 動的疑似クラス （例：:hover, :active, :focus; [CSS2]、5.11節）
• ハイパーリンク（SVGコンテンツからのリンク：‘a’要素参照）

bounding-box

ポインターが要素のバウンディングボックス上にある場合、その要素はポインターイベントのターゲットとなります。

visiblePainted

visibilityプロパティがvisibleに設定され、かつポインターが「塗られた」領域上にある場合に、その要素はポインターイベントのターゲットとなります。塗られた領域とは、要素の内部（fill）でfillプロパティがnone以外、または要素の輪郭（stroke）でstrokeプロパティがnone以外の場合です。

visibleFill

visibilityプロパティがvisibleに設定され、かつポインターが要素の内部（fill）上にある場合に、その要素はポインターイベントのターゲットとなります。fillプロパティの値はイベント処理に影響しません。

visibleStroke

visibilityプロパティがvisibleに設定され、かつポインターが要素の輪郭（stroke）上にある場合に、その要素はポインターイベントのターゲットとなります。strokeプロパティの値はイベント処理に影響しません。

visible

visibilityプロパティがvisibleに設定され、ポインターが要素の内部（fill）または輪郭（stroke）上にある場合に、その要素はポインターイベントのターゲットとなります。fillおよびstrokeの値はイベント処理に影響しません。

painted

ポインターが「塗られた」領域上にある場合に、その要素はポインターイベントのターゲットとなります。塗られた領域とは、要素の内部（fill）でfillプロパティがnone以外、または要素の輪郭（stroke）でstrokeプロパティがnone以外の場合です。visibilityプロパティの値はイベント処理に影響しません。

fill

ポインターが要素の内部（fill）上にある場合に、その要素はポインターイベントのターゲットとなります。fillおよびvisibilityプロパティの値はイベント処理に影響しません。

stroke

ポインターが要素の輪郭（stroke）上にある場合に、その要素はポインターイベントのターゲットとなります。strokeおよびvisibilityプロパティの値はイベント処理に影響しません。

all

ポインターが要素の内部（fill）または輪郭（stroke）上にある場合、その要素は常にポインターイベントのターゲットとなります。fill、stroke、およびvisibilityプロパティの値はイベント処理に影響しません。

none

この要素はポインターイベントを受け取らない。

テキスト要素の場合、ヒットテストは文字セル単位で行われます：

• visiblePaintedの値は、fillプロパティがnone以外、またはstrokeプロパティがnone以外、かつvisibilityプロパティがvisibleに設定されている場合、文字セルのどこでもイベントを受け取ることができます。
• visibleFill、visibleStroke、visibleの値は同等であり、visibilityプロパティがvisibleに設定されていれば、文字セルのどこでもイベントを受け取ることができます。fillおよびstrokeの値はイベント処理に影響しません。
• paintedの値は、fillプロパティがnone以外、またはstrokeプロパティがnone以外の場合、文字セルのどこでもイベントを受け取ることができます。visibilityプロパティの値はイベント処理に影響しません。
• fill、stroke、allの値は同等であり、文字セルのどこでもイベントを受け取ることができます。fill、stroke、visibilityプロパティの値はイベント処理に影響しません。
• noneの値は、そのテキストがポインターイベントを受け取らないことを示します。

ラスタ画像の場合、ヒットテストは画像全体（矩形領域）単位か、ピクセル単位（ポインター下のピクセルのアルファ値による判定）で行われます：

• visiblePaintedの値は、画像の範囲内でポインター下のラスタ画像のピクセルのいずれかが完全に透明でない場合、かつvisibilityプロパティがvisibleに設定されている場合、イベントを受け取ることができます。
• visibleFill、visibleStroke、visibleの値は同等であり、画像の矩形領域内でvisibilityプロパティがvisibleに設定されていれば、イベントを受け取ることができます。
• paintedの値は、画像の範囲内でポインター下のラスタ画像のピクセルのいずれかが完全に透明でなければイベントを受け取ることができます。visibilityプロパティの値はイベント処理に影響しません。
• fill、stroke、allの値は同等であり、画像の矩形領域内でイベントを受け取ることができます。visibilityプロパティの値はイベント処理に影響しません。
• noneの値は、画像がポインターイベントを受け取らないことを示します。

ラスタ画像の場合、opacity、fill-opacity、stroke-opacity、fill、strokeの各プロパティ値はイベント処理に影響しません。

15.7. 拡大・パン操作

拡大（Magnification）はSVG文書片全体に一様な変換を施す操作であり、拡大操作はすべてのグラフィック要素を同じ倍率でスケーリングします。拡大操作は、SVG文書片の最外層（すなわち、最上位svg要素の外側）に補助的なスケールおよび移動（translate）変換を追加する効果があります。

パン操作（Panning）は、ユーザーインターフェイス操作に応じてSVG文書片に平行移動（シフト）変換を行うものです。

インタラクション機能を持つユーザー環境で動作するSVGユーザーエージェントは、拡大・パン操作の機能をサポートする必要があります。

SVG文書片の最上位svg要素には、属性‘zoomAndPan’があり、値はdisableとmagnifyが指定可能で、デフォルトはmagnifyです。

zoomAndPan属性は非推奨のリスクがあり、既知の実装はなく、今後も実装される可能性が低いです。 Github issue #56参照。

名前	値	初期値	アニメーション可能
zoomAndPan	[ disable | magnify ]	disable	不可

disableの場合、ユーザーエージェントは拡大・パン操作のコントロールを無効化し、当該文書片で拡大・パンの操作を許可しません。

magnifyの場合、インタラクティブな環境ではユーザーエージェントが拡大操作のコントロールを提供し、文書片に対して拡大操作を行えるようにします。

‘zoomAndPan’属性が内部の‘svg’要素に指定された場合、内部の‘zoomAndPan’設定はSVGユーザーエージェントには影響しません。

<!DOCTYPE html>
<button id="A" tabindex="1">First thing</button>
<button id="C" tabindex="2">Third thing</button>
<svg width="200" height="200">
  <text id="B" tabindex="1" x="100" y="100">Second thing</text>
</svg>

15.9. イベント属性

イベント属性

イベント属性は常に "on" で始まり、対象となるイベント名が続きます。 指定した要素にそのイベント型が配信された時に実行するスクリプトを指定します。

ユーザーエージェントが対応するイベント型ごとに、SVGは同様にイベント属性としてサポートします。要件はevent handler content attributes [HTML] と同じです。 イベント属性はすべてのSVG要素で利用できます。

イベント属性の内容は常にECMAScriptとして解釈され、'application/ecmascript'メディアタイプで処理されるものとします。 [rfc2046][rfc4329]

イベント属性はアニメーション可能ではありません。

実装者はイベント属性の設定を、EventListenerをEventTargetに作成・登録するものとみなしても構いません。こうしたイベントリスナーは "bubbling" および "at target" フェーズのみ呼び出され、addEventListener の useCapture 引数が false であるかのように動作します。このEventListenerは、他のEventTargetに登録されうるものと同様に動作します。

イベントリスナーを表す属性が変更された場合、それは以前登録されていたEventListenerの削除と新しいものの登録とみなしても構いません。また、イベント属性が他のEventListenerより先にイベントを受け取る順序については規定されていません。

function myAction1(evt) {
  // イベントを処理
}
// ... 後で ...
myElement.addEventListener("click", myAction1, false)

<rect onclick="MyClickHandler(evt)" .../>

15.9.1. アニメーションイベント属性

以下はアニメーションイベント属性の定義です。 これらはアニメーション要素で指定できます。

属性定義:

名前	値	初期値	アニメーション可能
onbegin, onend, onrepeat	(下記参照)	(なし)	不可

対応するイベントの "bubbling" または "at target" フェーズリスナーが、その属性が指定された要素で発火した時に実行するスクリプトを指定します。どのイベント属性がどのイベントに対応するかはサポートイベント表を参照してください。値に制限はありません。

15.10. ‘script’ 要素

‘script’要素はHTMLの‘script’と同等であり、スクリプト（例：ECMAScript）を記述する場所です。いずれかの‘script’要素内で定義された関数は現在の文書全体で「グローバル」スコープを持ちます。

スクリプトのテキスト内容は直接レンダリングされることはありません。 ‘script’要素のdisplay値は、ユーザーエージェントスタイルシートにより常にnoneに設定されなければならず、この宣言は他のCSSルールやプレゼンテーション属性よりも優先されます。

‘script’要素を実行しようとする前に、‘type’の解決済みメディアタイプ値を確認する必要があります。 SVGユーザーエージェントがスクリプト言語をサポートしない場合、‘script’要素は実行されてはなりません。

この例では、circle_click関数を定義し、‘onclick’イベント属性によって‘circle’要素で呼び出されます。左側の図が初期画像、右側は円をクリックした後の結果を示します。

  <?xml version="1.0" standalone="no"?>
  <svg width="6cm" height="5cm" viewBox="0 0 600 500"
       xmlns="http://www.w3.org/2000/svg">
    <desc>Example script01 - invoke an ECMAScript function from an onclick event
    </desc>
    <!-- ECMAScript to change the radius with each click -->
    <script type="application/ecmascript"> <![CDATA[
      function circle_click(evt) {
        var circle = evt.target;
        var currentRadius = circle.getAttribute("r");
        if (currentRadius == 100)
          circle.setAttribute("r", currentRadius*2);
        else
          circle.setAttribute("r", currentRadius*0.5);
      }
    ]]> </script>

    <!-- Outline the drawing area with a blue line -->
    <rect x="1" y="1" width="598" height="498" fill="none" stroke="blue"/>

    <!-- Act on each click event -->
    <circle onclick="circle_click(evt)" cx="300" cy="225" r="100"
            fill="red"/>

    <text x="300" y="480"
          font-family="Verdana" font-size="35" text-anchor="middle">

      Click on circle to change its size
    </text>
  </svg>
  

‘onclick’イベントハンドラのSVG図形への効果を示す例。

この例をSVGで表示 (SVG対応ブラウザのみ)

属性定義:

名前	値	初期値	アニメーション可能
crossorigin	[ anonymous | use-credentials ]?	(HTML属性の定義参照)	はい

crossorigin属性はCORS設定属性であり、特に規定がない限りHTMLと同じ処理ルールに従います [HTML]。

名前	値	初期値	アニメーション可能
type	(下記参照)	application/ecmascript	不可

指定した‘script’要素のスクリプト言語を識別します。値は Multipurpose Internet Mail Extensions (MIME) Part Two [rfc2046] に従い、有効なメディアタイプでなければなりません。 ‘type’が指定されていない場合、デフォルトのスクリプト言語はECMAScriptであり、‘application/ecmascript’メディアタイプで処理されたものとみなします。

名前	値	初期値	アニメーション可能
href	URL [URL]	(なし)	不可

URL参照で、外部リソースに含まれるスクリプトコードを指定します。 URL参照属性および 非推奨XLink属性の共通処理定義も参照してください。

URLは処理され、リソースはリンク章で説明される通りに取得されます。

15.11. DOMインターフェイス

15.11.1. SVGScriptElement インターフェイス

SVGScriptElementオブジェクトは、DOM内の‘script’要素を表します。

[Exposed=Window]
interface SVGScriptElement : SVGElement {
  attribute DOMString type;
  attribute DOMString? crossOrigin;
};

SVGScriptElement includes SVGURIReference;

type IDL属性は、 ‘type’コンテンツ属性を反映します。

crossOrigin IDL属性は ‘crossorigin’コンテンツ属性を反映します。