16 対話性

目次

• 16.1 概要
• 16.2 サポートされているイベントの完全な一覧
• 16.3 ＵＩ（ユーザーインターフェース）イベント
• 16.4 ポインタイベント
• 16.5 ＵＩイベントの処理順序
• 16.6 'pointer-events' プロパティ
• 16.7 ズームとパン
• 16.8 カーソル
  • 16.8.1 カーソルの概要
  • 16.8.2 'cursor' プロパティ
  • 16.8.3 'cursor' 要素
• 16.9 Document イベント属性モジュール
• 16.10 Graphical イベント属性モジュール
• 16.11 Animation イベント属性モジュール
• 16.12 Cursor モジュール
• 16.13 DOM インターフェース

• 16.1 Introduction
• 16.2 Complete list of supported events
• 16.3 User interface events
• 16.4 Pointer events
• 16.5 Processing order for user interface events
• 16.6 The 'pointer-events' property
• 16.7 Magnification and panning
• 16.8 Cursors
  • 16.8.1 Introduction to cursors
  • 16.8.2 The 'cursor' property
  • 16.8.3 The 'cursor' element
• 16.9 Document Events Attribute Module
• 16.10 Graphical Events Attribute Module
• 16.11 Animation Events Attribute Module
• 16.12 Cursor Module
• 16.13 DOM interfaces

16.1 概要

次に挙げる SVG 言語の特色機能の利用により、 SVG 内容に対話性（即ち利用者からのイベントに反応する）を持たせられる：

SVG content can be interactive (i.e., responsive to user-initiated events) by utilizing the following features in the SVG language:

• ポインティング装置（例えばマウス）のボタンの押下などの利用者の行為による アニメーション や スクリプト の起動。
• User-initiated actions such as button presses on the pointing device (e.g., a mouse) can cause animations or scripts to execute.
• 特定のグラフィックス要素の上にポインティング装置が指す位置が重なっているときの、マウスクリックなどの利用者の行為による新しいウェブページへのハイパーリンク（ SVG 内容外へのリンク：'a'要素 を見よ）の起動。
• The user can initiate hyperlinks to new Web pages (see Links out of SVG content: the 'a' element) by actions such as mouse clicks when the pointing device is positioned over particular graphics elements.
• 利用者による SVG 内容のズームやパン。 'svg' 要素の zoomAndPan 属性の値やＵＡの特性にも依存するが多くの場合に可能である。
• In many cases, depending on the value of the zoomAndPan attribute on the 'svg' element and on the characteristics of the user agent, users are able to zoom into and pan around SVG content.
• 利用者のポインティング装置の動きに応じて、ポインティング装置の現在の位置を示す カーソル を変化させること。
• User movements of the pointing device can cause changes to the cursor that shows the current position of the pointing device.

この章では次について述べる：

This chapter describes:

• どのような状況下でイベントが発火されるかを含めた イベント についての情報
• information about events, including under which circumstances events are triggered
• 文書の ズームとパン を可能にするかどうかの指定方法
• how to indicate whether a given document can be zoomed and panned
• 利用する カーソル の指定方法
• how to specify which cursors to use

他の章にも関連する情報がある：

Related information can be found in other chapters:

• ハイパーリンクについては リンク で解説する。
• hyperlinks are discussed in Links
• スクリプトとイベント属性については スクリプト で解説する。
• scripting and event attributes are discussed in Scripting
• SVG の DOM2 イベントとの関連については DOM2 イベントモデルとの関連 で解説する。
• SVG's relationship to DOM2 events is discussed in Relationship with DOM2 event model
• アニメーションについては アニメーション で解説する。
• animation is discussed in Animation

16.2 サポートされているイベントの完全な一覧

SVG では、以下の仕組みにおいてイベントが作用する：

The following aspects of SVG are affected by events:

• スクリプトでは、イベントが生じたときにスクリプトが呼び出されるように、 SVG 文書オブジェクトモデル（ DOM ） を利用して DOM2 イベントリスナ （ event listener ）を登録することができる。
• Using SVG Document Object Model (DOM), a script can register DOM2 event listeners so that script can be invoked when a given event occurs.
• SVG においては、イベントに結び付けることができる適切な要素に対し、そのイベントが生じたときに実行されるスクリプトを定義する イベント属性 を付加できる。
• SVG includes event attributes on selected elements which define script that can be executed when a given event occurs in association with the given element.
• SVG の アニメーション要素 にはイベントに基づく開始または終了を定義できる。
• SVG's animation elements can be defined to begin or end based on events.

次の表に、 SVG から認識されサポートされる全てのイベントを挙げる。 最初の列のイベント名はアニメーションを開始／終了させるイベントを定義するために SVG の アニメーション要素 で利用される名前である。３列目の DOM2 名 は DOM2 イベントリスナ を定義するために利用される名前である。５列目のイベント属性名は対応する イベント属性 の名前であり、 SVG 言語の要素に付加することができる。

The following table lists all of the events which are recognized and supported in SVG. The Event name in the first column is the name to use within SVG's animation elements to define the events which can start or end animations. The DOM2 name in the third column is the name to use when defining DOM2 event listeners. The Event attribute name in the fifth column contains the corresponding name of the event attributes that can be attached to elements in the SVG language.

DOM2 キーイベント で述べられている様に、 SVG の仕様にはキーイベントセットが提供されていない。キーボード入力装置のためのイベントセットは将来版の DOM と SVG 仕様に含まれる予定である。

As in DOM2 Key events, the SVG specification does not provide a key event set. An event set designed for use with keyboard input devices will be included in a later version of the DOM and SVG specifications.

SVGLoad イベントはイベントが適用されている要素のみに配送され、その祖先には配送されない。例えば、 'image' 要素とその親の 'g' 要素の両方に SVGLoad イベントに対応するイベントリスナが割り当てられている場合、 'image' 要素が読み込まれた時は、そのイベントリスナのみが呼び出される。（ 'g' 要素のイベントリスナは実際に呼び出されるが、それは 'g' が読み込まれた時点のことである。）
（ エラータ ：この段落は SVG Tiny 1.2 との一貫性を保つため、次の短い一文に置き換えられた）
SVGLoad イベントは浮上しない。

A SVGLoad event is dispatched only to the element to which the event applies; it is not dispatched to its ancestors. For example, if an 'image' element and its parent 'g' element both have event listeners for SVGLoad events, when the 'image' element has been loaded, only its event listener will be invoked. (The 'g' element's event listener will indeed get invoked, but the invocation will happen when the 'g' itself has been loaded.)

DOM2 のイベント型においてイベントリスナに渡されるパラメタの詳細は DOM2 仕様を参照のこと。他のイベント型においてイベントリスナに渡されるパラメタはこの仕様の他の場所で述べられる。

Details on the parameters passed to event listeners for the event types from DOM2 can be found in the DOM2 specification. For other event types, the parameters passed to event listeners are described elsewhere in this specification.

16.3 ＵＩイベント

対話性をサポートするＵＡ向けに、文書作成者がＵＩイベント（ユーザーインターフェース・イベント）に反応できるように SVG 文書を定義することはごく一般的なことである。ＵＩイベントには ポインタイベント, キーボードイベント, 文書イベントがある。

On user agents which support interactivity, it is common for authors to define SVG documents such that they are responsive to user interface events. Among the set of possible user events are pointer events, keyboard events, and document events.

文書作成者はＵＩイベントへの反応として、アニメーションの開始, 他のウェブページへのハイパーリンクの実行, 文書の一部のハイライト（例えばポインタに重なるグラフィックス要素の色を変化させるなど）, 「ロールオーバー（ roll-over ）」の開始（例えばポインタの傍にあらかじめ隠されてあったグラフィックス要素が現れる）, リモートのデータベースと交信するスクリプトの起動, 等々をさせられる。

In response to user interface (UI) events, the author might start an animation, perform a hyperlink to another Web page, highlight part of the document (e.g., change the color of the graphics elements which are under the pointer), initiate a "roll-over" (e.g., cause some previously hidden graphics elements to appear near the pointer) or launch a script which communicates with a remote database.

イベント属性 または アニメーション により SVG 言語の一部としてとして定義される全てのＵＩイベント関連の特色機能では、イベントのモデルは DOM2 [DOM2-EVBUBBLE] によるイベント浮上（ event bubbling ）モデルに対応する。一方、 DOM2 [DOM2-EVCAPTURE] によるイベント捕獲（ event capture ）モデルは DOM メソッド呼び出しのみにより確立できる。

For all UI event-related features defined as part of the SVG language via event attributes or animation, the event model corresponds to the event bubbling model described in DOM2 [ DOM2-EVBUBBLE]. The event capture model from DOM2 [ DOM2-EVCAPTURE] can only be established from DOM method calls.

16.4 ポインタイベント

利用者のポインティング装置の行為によって生ずるＵＩイベントをポインタイベントと呼ぶ。

User interface events that occur because of user actions performed on a pointer device are called pointer events.

多くのシステムはマウスやトラックボールなどのポインティング装置をサポートする。マウスを利用するシステムでは、ポインタイベントはマウスの移動やマウスクリックなどの行為から生ずる。異なるポインティング装置を利用するシステムでは、ボタンの押下をマウスクリックと等価なものとするなど、利用者による行為を等価なものに置き換える仕組みを提供することにより、マウスの振る舞いをエミュレートする。

Many systems support pointer devices such as a mouse or trackball. On systems which use a mouse, pointer events consist of actions such as mouse movements and mouse clicks. On systems with a different pointer device, the pointing device often emulates the behavior of the mouse by providing a mechanism for equivalent user actions, such as a button to press which is equivalent to a mouse click.

ポインタイベントそれぞれに対し、 SVG-ＵＡはポインタイベントの標的要素（ target element ）を決定する。標的要素はイベントが生じた時点において、要素に関連付けられたグラフィック内容がポインタに重なるグラフィックス要素のうち、最も手前にあるものになる。（要素に関連付けられたグラフィック内容がポインタに重なるかどうかがどのように決定されるか、その状況においてグラフィックス要素がポインタイベントの標的要素になり得るかどうかについては 'pointer-events' プロパティを見よ。）要素が表示されない（即ち要素またはその祖先の 'display' プロパティの値が none ）の場合、その要素はポインタイベントの標的になり得ない。

For each pointer event, the SVG user agent determines the target element of a given pointer event. The target element is the topmost graphics element whose relevant graphical content is under the pointer at the time of the event. (See property 'pointer-events' for a description of how to determine whether an element's relevant graphical content is under the pointer, and thus in which circumstances that graphic element can be the target element for a pointer event.) When an element is not displayed (i.e., when the 'display' property on that element or one of its ancestors has a value of none), that element cannot be the target of pointer events.

イベントは標的要素に配送されるか, 標的要素の祖先の一つに配送されるか, あるいは配送されないかのいずれかであり、次に依存して定まる：

The event is either initially dispatched to the target element, to one of the target element's ancestors, or not dispatched, depending on the following:

• グラフィック内容がポインタに重なるようなグラフィックス要素が存在しない場合（即ち標的要素が無い）、イベントは配送されない。
• If there are no graphics elements whose relevant graphics content is under the pointer (i.e., there is no target element), the event is not dispatched.
• 他の場合は標的要素が存在する。標的要素の祖先にイベントに対するイベント捕獲 [DOM2-EVCAPTURE] をするイベントハンドラが指定されている場合、イベントはその祖先要素に配送される。
• Otherwise, there is a target element. If there is an ancestor of the target element which has specified an event handler with event capturing [ DOM2-EVCAPTURE] for the given event, then the event is dispatched to that ancestor element.
• そうでない場合、標的要素がそのイベントに対する適切なイベントハンドラを持つ場合、イベントはその標的要素に配送される。
• Otherwise, if the target element has an appropriate event handler for the given event, the event is dispatched to the target element.
• そうでない場合、標的要素の各祖先（直接の親から始める）について適切なイベントハンドラがあるかどうか調べられ、そのようなイベントハンドラを持つものが見つかれば、イベントはその祖先要素に配送される。
• Otherwise, each ancestor of the target element (starting with its immediate parent) is checked to see if it has an appropriate event handler. If an ancestor is found with an appropriate event handler, the event is dispatched to that ancestor element.
• そうでない場合、イベントは破棄される。
• Otherwise, the event is discarded.

イベント浮上 [DOM2-EVBUBBLE] の過程においては、標的要素の直接の祖先全てにわたる浮上が生ずる。子孫側が祖先側より先にイベントを受け取る。したがって 'path' 要素が 'g' 要素の子であり、その両方が click イベントに対するイベントリスナを持つ場合、そのイベントは 'g' 要素の前に 'path' 要素に配送される。

When event bubbling [ DOM2-EVBUBBLE] is active, bubbling occurs up to all direct ancestors of the target element. Descendant elements receive events before their ancestors. Thus, if a 'path' element is a child of a 'g' element and they both have event listeners for click events, then the event will be dispatched to the 'path' element before the 'g' element.

イベント捕獲 [DOM2-EVCAPTURE] の過程においては、祖先要素がその子孫より先にイベントを受け取る。

When event capturing [ DOM2-EVCAPTURE] is active, ancestor elements receive events before their descendants.

イベントが最初に特定の要素に配送された後、更なる処理をさせない適切な動作（例えば preventCapture() または preventBubble() DOM メソッド呼び出しなど）がなされない限り、イベントは要素の祖先（イベント浮上の場合）または子孫（イベント捕獲の場合）に更なる処理をさせられる適切なイベントハンドラがあれば、それに渡される。

After an event is initially dispatched to a particular element, unless an appropriate action has been taken to prevent further processing (e.g., by invoking the preventCapture() or preventBubble() DOM method call), the event will be passed to the appropriate event handlers (if any) for that element's ancestors (in the case of event bubbling) or that element's descendants (in the case of event capture) for further processing.

16.5 ＵＩイベントの処理順序

ＵＩイベントの処理順序は次の様になる：

The processing order for user interface events is as follows:

• ポインタと重なるグラフィックス要素のうち最も手前にある要素（と、イベント浮上の経路上に含まれるそのグラフィックス要素の祖先たち）に割り当てられているイベントハンドラ [DOM2-EVBUBBLE] ）が最初にイベントを受け取る。イベントに更なる処理をさせない明示的動作（例えば preventDefault() DOM メソッドの呼び出し）を行うイベントハンドラが無ければ、次に渡される：
• Event handlers assigned to the topmost graphics element under the pointer (and the various ancestors of that graphics element via potential event bubbling [ DOM2-EVBUBBLE]) receive the event first. If none of the activation event handlers take an explicit action to prevent further processing of the given event (e.g., by invoking the preventDefault() DOM method), then the event is passed on for:
• 関連付けられた動的疑似クラス（ pseudo-classes ）（即ち :hover, :active, :focus ） [CSS2-DYNPSEUDO] の処理が行われる。その後、次に渡される：
• Processing of any relevant dynamic pseudo-classes (i.e., :hover, :active and :focus) [ CSS2-DYNPSEUDO], after which the event is passed on for:
• （マウスクリックなどによる、ハイパーリンクを呼び出すＵＩイベントに対しては） Link 処理。ＵＩイベントへの反応としてハイパーリンクが呼び出される場合、更なるイベント処理は概して行われなくなる（例えばリンクはしばしば別のウェブページへのハイパーリンクを定義する）。リンク処理がイベントの更なる処理を止めない場合、次に渡される：
• (For those user interface events which invoke hyperlinks, such as mouse clicks in some user agents) Link processing. If a hyperlink is invoked in response to a user interface event, the hyperlink typically will disable further activation event processing (e.g., often, the link will define a hyperlink to another Web page). If link processing does not disable further processing of the given event, then the event is passed on for:
• （'text' 要素上でのマウスクリックとドラッグなどのようなテキスト選択のＵＩイベントに対する） テキスト選択 操作。テキスト選択操作が生じた場合、更なるイベント処理は概して行われないが、そうでない場合、次に渡される：
• (For those user interface events which can select text, such as mouse clicks and drags on 'text' elements) Text selection processing. When a text selection operation occurs, typically it will disable further processing of the given event; otherwise, the event is passed on for:
• SVG 文書片のズームとパンなどの、ＵＡが提供する機能による文書全体に対するイベントの処理。
• Document-wide event processing, such as user agent facilities to allow zooming and panning of an SVG document fragment.

16.6 'pointer-events' プロパティ

文書作成者にとっては、どのような状況下で特定のグラフィックス要素がポインタイベントの標的になれるかどうかを制御したくなる場面がある。例えば、ストロークされた図形の境界部にポインタが重なるときにのみポインタイベントを受け取れるようにしたい場合や、要素の奥にあるグラフィックス要素がポインタイベントの標的になれるよう、いかなる状況においても手前の要素がポインタイベントを無視するようにさせたい場合などがある。

In different circumstances, authors may want to control under what circumstances particular graphic elements can become the target of pointer events. For example, the author might want a given element to receive pointer events only when the pointer is over the stroked perimeter of a given shape. In other cases, the author might want a given element to ignore pointer events under all circumstances so that graphical elements underneath the given element will become the target of pointer events.

具体的には、 'fill' を blue にされた矩形の上に、 'stroke' を red （即ち外形線が赤色）に、かつ 'fill' を none （即ち内部は塗られない）にされた円形が直接描画されている状況下で、円形の境界部にポインタが重なるときにのみ円形がポインタイベントの標的になるようにさせ、円形の内部にポインタが重なるときは奥の矩形がポインタイベントの標的になるようにさせたい場合などである。

For example, suppose a circle with a 'stroke' of red (i.e., the outline is solid red) and a 'fill' of none (i.e., the interior is not painted) is rendered directly on top of a rectangle with a 'fill' of blue. The author might want the circle to be the target of pointer events only when the pointer is over the perimeter of the circle. When the pointer is over the interior of the circle, the author might want the underlying rectangle to be the target element of pointer events.

'pointer-events' プロパティは、どのような状況でグラフィックス要素がポインタイベントの標的要素になれるかを指示する。これは次に挙げるものの処理に影響を及ぼす：

The 'pointer-events' property specifies under what circumstances a given graphics element can be the target element for a pointer event. It affects the circumstances under which the following are processed:

• マウスクリックなどのＵＩイベント
• user interface events such as mouse clicks
• 動的疑似クラス（すなわち :hover, :active, :focus ） [CSS2-DYNPSEUDO]
• dynamic pseudo-classes (i.e., :hover, :active and :focus) [ CSS2-DYNPSEUDO]
• ハイパーリンク（ SVG 内容外へのリンク：'a' 要素 を見よ）
• hyperlinks (see Links out of SVG content: the 'a' element)

visiblePainted

'visibility' プロパティが visible に設定されており、かつ「塗られた」領域にポインタが重なっているときにポインタイベントの標的要素になれる。塗られた領域にポインタが重なるとは、要素の内部（即ちフィル）にポインタが重なっており、かつ 'fill' プロパティが none 以外の値に設定されているか、あるいは要素の境界部（即ちストローク）にポインタが重なっており、かつ 'stroke' プロパティが none 以外の値に設定されていることを意味する。 （ エラータ ： 'fill' の値が（ URI 参照により間接的に設定されるなどにより）、実際に none になる場合もポインタと重なっていないものとする。）

The given element can be the target element for pointer events when the 'visibility' property is set to visible and when the pointer is over a "painted" area. The pointer is over a painted area if it is over the interior (i.e., fill) of the element and the 'fill' property is set to a value other than 'none' or it is over the perimeter (i.e., stroke) of the element and the 'stroke' property is set to a value other than 'none'.

visibleFill

'visibility' プロパティが visible に設定されており、かつ要素の内部（即ちフィル）にポインタが重なっているときにポインタイベントの標的要素になれる。 'fill' プロパティの値はイベント処理に影響しない。

The given element can be the target element for pointer events when the 'visibility' property is set to visible and when the pointer is over the interior (i.e., fill) of the element. The value of the 'fill' property does not effect event processing.

visibleStroke

'visibility' プロパティが visible に設定されており、かつ要素の境界部（即ちストローク）にポインタが重なっているときにポインタイベントの標的要素になれる。 'stroke' プロパティの値はイベント処理に影響しない。

The given element can be the target element for pointer events when the 'visibility' property is set to visible and when the pointer is over the perimeter (i.e., stroke) of the element. The value of the 'stroke' property does not effect event processing.

visible

'visibility' プロパティが visible に設定されており、かつ要素の内部（即ちフィル）または境界部（即ちストローク）にポインタが重なっているときにポインタイベントの標的要素になれる。 'fill', 'stroke' プロパティの値はイベント処理に影響しない。

The given element can be the target element for pointer events when the 'visibility' property is set to visible and the pointer is over either the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of the 'fill' and 'stroke' do not effect event processing.

painted

要素の「塗られた」領域にポインタが重なっているときにポインタイベントの標的要素になれる。塗られた領域にポインタが重なっているとは、要素の内部（即ちフィル）に重なっており、かつ 'fill' プロパティが none 以外の値に設定されているか、あるいは要素の境界部（即ちストローク）に重なっており、かつ 'stroke' プロパティが none 以外の値に設定されていることを意味する。 'visibility' プロパティの値はイベント処理に影響しない。 （ エラータ ： 'fill' あるいは 'stroke' の値が（ URI 参照により間接的に設定されるなどにより）、実際に none になる場合もポインタと重なっていないものとする。）

The given element can be the target element for pointer events when the pointer is over a "painted" area. The pointer is over a painted area if it is over the interior (i.e., fill) of the element and the 'fill' property is set to a value other than 'none' or it is over the perimeter (i.e., stroke) of the element and the 'stroke' property is set to a value other than 'none'. The value of the 'visibility' property does not effect event processing.

fill

要素の内部（即ちフィル）にポインタが重なっているときにポインタイベントの標的要素になれる。 'fill' と 'visibility' プロパティの値はイベント処理に影響しない。

The given element can be the target element for pointer events when the pointer is over the interior (i.e., fill) of the element. The values of the 'fill' and 'visibility' properties do not effect event processing.

stroke

要素の境界部（即ちストローク）にポインタが重なっているときにポインタイベントの標的要素になれる。 'stroke', 'visibility' プロパティの値はイベント処理に影響しない。

The given element can be the target element for pointer events when the pointer is over the perimeter (i.e., stroke) of the element. The values of the 'stroke' and 'visibility' properties do not effect event processing.

all

要素の内部（即ちフィル）または境界部（即ちストローク）にポインタが重なっているときにポインタイベントの標的要素になれる。 'fill', 'stroke', 'visibility' プロパティの値はイベント処理に影響しない。

The given element can be the target element for pointer events whenever the pointer is over either the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of the 'fill', 'stroke' and 'visibility' properties do not effect event processing.

none

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

The given element does not receive pointer events.

テキスト要素に対しては、文字セルを基に当たり判定が行われる：

For text elements, hit detection is performed on a character cell basis:

• 値 visiblePainted は、 'fill' プロパティが none 以外の値、あるいは 'stroke' プロパティが none 以外の値に設定されており、かつ 'visibility' プロパティが visible に設定されているときに、テキスト文字列は文字セルのどこであろうとイベントを受け取れることを指示する。
• The value visiblePainted means that the text string can receive events anywhere within the character cell if either the 'fill' property is set to a value other than none or the 'stroke' property is set to a value other than none, with the additional requirement that the 'visibility' property is set to visible.
• 値 visibleFill, visibleStroke, visible は皆同値であり、 'visibility' プロパティが visible に設定されているときに、テキスト文字列は文字セルのどこであろうとイベントを受け取れることを指示する。 'fill', 'stroke' プロパティの値はイベント処理に影響しない。
• The values visibleFill, visibleStroke and visible are equivalent and indicate that the text string can receive events anywhere within the character cell if the 'visibility' property is set to visible. The values of the 'fill' and 'stroke' properties do not effect event processing.
• 値 painted は 'fill' プロパティまたは none 以外の値、あるいは 'stroke' プロパティが none 以外の値のときに、テキスト文字列は文字セルのどこであろうとイベントを受け取れることを指示する。 'visibility' プロパティの値はイベント処理に影響しない。
• The value painted means that the text string can receive events anywhere within the character cell if either the 'fill' property is set to a value other than none or the 'stroke' property is set to a value other than none. The value of the 'visibility' property does not effect event processing.
• 値 fill, stroke, all は皆同値であり、テキスト文字列は文字セルのどこであろうとイベントを受け取れることを指示する。 'fill', 'stroke', 'visibility' プロパティの値はイベント処理に影響しない。
• The values fill, stroke and all are equivalent and indicate that the text string can receive events anywhere within the character cell. The values of the 'fill', 'stroke' and 'visibility' properties do not effect event processing.
• 値 none はテキストがポインタイベントを受け取らないことを指示する。
• The value none indicates that the given text does not receive pointer events.

ラスター画像に対する当たり判定は画像全体（即ち画像の矩形領域が画像がイベントを受け取るかどうかの決定要因の一つ）あるいは画素ごと（即ちポインタと重なる画素におけるアルファ値が画像がイベントを受け取るかどうかの決定要因の一つ）に行われる：

For raster images, hit detection is either performed on a whole-image basis (i.e., the rectangular area for the image is one of the determinants for whether the image receives the event) or on a per-pixel basic (i.e., the alpha values for pixels under the pointer help determine whether the image receives the event):

• 値 visiblePainted は、ポインタと重なるラスター画像の画素が完全に透明ではなく、かつ 'visibility' プロパティが visible に設定されているとき、その領域内のイベントを受け取れることを指示する。
• The value visiblePainted means that the raster image can receive events anywhere within the bounds of the image if any pixel from the raster image which is under the pointer is not fully transparent, with the additional requirement that the 'visibility' property is set to visible.
• 値 visibleFill, visibleStroke, visible は皆同値であり、 'visibility' プロパティが visible に設定されているとき、画像はその矩形領域内のイベントを受け取れることを指示する。
• The values visibleFill, visibleStroke and visible are equivalent and indicate that the image can receive events anywhere within the rectangular area for the image if the 'visibility' property is set to visible.
• 値 painted は、ポインタと重なるラスター画像の画素が完全に透明ではないとき、その領域内のイベントを受け取れることを指示する。 'visibility' プロパティの値はイベント処理に影響しない。
• The value painted means that the raster image can receive events anywhere within the bounds of the image if any pixel from the raster image which is under the pointer is not fully transparent. The value of the 'visibility' property does not effect event processing.
• 値 fill, stroke, all は皆同値であり、画像はその矩形領域内のどこであれイベントを受け取れることを指示する。 'visibility' プロパティの値はイベント処理に影響しない。
• The values fill, stroke and all are equivalent and indicate that the image can receive events anywhere within the rectangular area for the image. The value of the 'visibility' property does not effect event processing.
• 値 none は、画像がポインタイベントを受け取らないことを指示する。
• The value none indicates that the image does not receive pointer events.

ラスター画像においては、 'opacity', 'fill-opacity', 'stroke-opacity', 'fill', 'stroke' プロパティの値はイベント処理に影響しないことに注意。

Note that for raster images, the values of properties 'opacity', 'fill-opacity', 'stroke-opacity', 'fill' and 'stroke' do not effect event processing.

16.7 ズームとパン

ズームとパンとは、全てのグラフィックス要素を同じ量だけ等倍／並進させるような、 SVG 文書片に対する一様かつ全体に渡る変換を表す。ズームとパンの演算は SVG 文書片の最も外側のレベル（即ち 最も外側の svg 要素 の外側）に追加の伸縮／並進変換を設置する効果を与える。

Magnification represents a complete, uniform transformation on an SVG document fragment, where the magnify operation scales all graphical elements by the same amount. A magnify operation has the effect of a supplemental scale and translate transformation placed at the outermost level on the SVG document fragment (i.e., outside the outermost 'svg' element).

パンは、ＵＩアクションに対する応答として、 SVG 文書片に対する並進（即ちずらして移動させる）変換を表現する。

Panning represents a translation (i.e., a shift) transformation on an SVG document fragment in response to a user interface action.

対話的な利用者環境を利用する SVG-ＵＡには、ズームとパン機能のサポートが要求される。

SVG user agents that operate in interaction-capable user environments are required to support the ability to magnify and pan.

SVG 文書片における 最も外側の svg 要素 は zoomAndPan 属性を持つ。 zoomAndPan 属性は disable または magnify いずれかの値をとり、既定値は magnify である。

The outermost 'svg' element in an SVG document fragment has attribute zoomAndPan, which takes the possible values of disable and magnify, with the default being magnify.

値 disable の場合、ＵＡはズームとパンの制御を切り、利用者に文書片のズームとパンをさせないようにすることになる。

If disable, the user agent shall disable any magnification and panning controls and not allow the user to magnify or pan on the given document fragment.

値 magnify の場合、対話的な利用者環境においては、ＵＡは利用者に文書片のズームとパンの操作機能を提供することになる。

If magnify, in environments that support user interactivity, the user agent shall provide controls to allow the user to perform a "magnify" operation on the document fragment.

内側の 'svg' 要素に zoomAndPan 属性が与えられても、 SVG-ＵＡに対しては何の効果も生じさせない。

If a zoomAndPan attribute is assigned to an inner 'svg' element, the zoomAndPan setting on the inner 'svg' element will have no effect on the SVG user agent.

アニメーション：不可

Animatable: no.

16.8 カーソル

16.8.1 カーソルの概要

一部の対話的視覚表示環境は、いわゆるカーソルと呼ばれるポインタの見栄えを変更する機能が提供する。３種類のカーソルが利用できる：

Some interactive display environments provide the ability to modify the appearance of the pointer, which is also known as the cursor. Three types of cursors are available:

• 標準の組み込みカーソル
• Standard built-in cursors
• プラットフォーム依存のカーソル
• Platform-specific custom cursors
• プラットフォーム非依存のカーソル
• Platform-independent custom cursors

'cursor' プロパティはどのカーソルを用いるかを指定するために利用される。 'cursor' プロパティは crosshair のようなキーワードの指定による標準の組み込みカーソル、あるいは独自のカーソルへの参照に利用できる。独自のカーソルは <uri> により参照され、 プラットフォーム特有のカーソルファイルのような外部リソースや、プラットフォーム非依存のカーソルを定義する 'cursor' 要素を指すことが可能である。

The 'cursor' property is used to specify which cursor to use. The 'cursor' property can be used to reference standard built-in cursors by specifying a keyword such as crosshair or a custom cursor. Custom cursors are referenced via a <uri> and can point to either an external resource such as a platform-specific cursor file or to a 'cursor' element, which can be used to define a platform-independent cursor.

16.8.2 'cursor' プロパティ

このプロパティはポインティング装置の表示カーソルの種類を指定する。それぞれの値は次の意味を持つ：

This property specifies the type of cursor to be displayed for the pointing device. Values have the following meanings:

auto

ＵＡが現在の文脈に則してカーソルを定める。

The UA determines the cursor to display based on the current context.

crosshair

単純な十字カーソル（ "+" 記号に似た短い縦横の線分）。

A simple crosshair (e.g., short line segments resembling a "+" sign).

default

プラットフォーム依存の既定のカーソル。矢印状のものがよく使われる。

The platform-dependent default cursor. Often rendered as an arrow.

pointer

カーソルはリンクを示唆するポインタ

The cursor is a pointer that indicates a link.

move

何かが動かされることを示唆する。

Indicates something is to be moved.

e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize

何かの端が動かされることを示唆する。例えば、'se-resize' カーソルはボックスの右下隅（south-east - 南東）から動きが始まるときに利用される。

Indicate that some edge is to be moved. For example, the 'se-resize' cursor is used when the movement starts from the south-east corner of the box.

text

テキストが選択可能であることを示唆する。大文字の I の形状のものがよく使われる。

Indicates text that can be selected. Often rendered as an I-bar.

wait

プログラムが何らかの処理に忙しいことを示唆する。砂時計や時計の絵柄がよく使われる。

Indicates that the program is busy. Often rendered as a watch or hourglass.

help

カーソルに重なるオブジェクトについてのヘルプがあることを示唆する。疑問符あるいは気球の形状のものがよく使われる。

Help is available for the object under the cursor. Often rendered as a question mark or a balloon.

<uri>

ＵＡは URI が指すリソースからカーソルを取得する。ＵＡはカーソルのリストを先頭から順に調べて、自身が扱える最初のカーソルを利用する。どの利用者定義のカーソルも扱えない場合、ＵＡはリストの最後の一般カーソルを利用しなければならない。

The user agent retrieves the cursor from the resource designated by the URI. If the user agent cannot handle the first cursor of a list of cursors, it shall attempt to handle the second, etc. If the user agent cannot handle any user-defined cursor, it must use the generic cursor at the end of the list.

P { cursor : url("mything.cur"), url("second.csr"), text; }

SVG-ＵＡが 'cursor' 要素により定義されるカーソルもサポートしなければならないことを除き、 SVG の 'cursor' プロパティは CSS2 （"Cascading Style Sheets (CSS) level 2"）仕様 [CSS2] で定義されている 'cursor' プロパティと同じである。

The 'cursor' property for SVG is identical to the 'cursor' property defined in the "Cascading Style Sheets (CSS) level 2" specification [ CSS2], with the exception that SVG user agents must support cursors defined by the 'cursor' element.

16.8.3 'cursor' 要素

プラットフォーム非依存の独自カーソルの定義に 'cursor' 要素を利用することができる。推奨される方法は、まず PNG [PNG01] 画像を作成し、 'cursor' 要素にその PNG 画像を参照させ、ポインタの画像内における正確な位置（いわゆるホットスポット）を指定することである。

The 'cursor' element can be used to define a platform-independent custom cursor. A recommended approach for defining a platform-independent custom cursor is to create a PNG [ PNG01] image and define a 'cursor' element that references the PNG image and identifies the exact position within the image which is the pointer position (i.e., the hot spot).

PNG 形式が推奨される理由は、アルファチャンネルによる透明度マスクを定義する機能がサポートされているからである。異なる画像形式が利用された場合、その形式は透明度マスクの定義（２通りの方法がある：明示的にアルファチャンネルを与えるか、特定の色が透明であることを指示するか）をサポートすべきである。透明度マスクが定められれば、マスクがカーソルの形状を定義する。そうでなければ、カーソルの形状は不透明な矩形となる。一般には、他の画素情報（例えば R, G, B チャンネル）はマスクで切り取られない部分におけるカーソルの色を定義する。カーソルは背景がどうであっても視認できるよう、通常は少なくとも２色以上は持たせることに注意。

The PNG format is recommended because it supports the ability to define a transparency mask via an alpha channel. If a different image format is used, this format should support the definition of a transparency mask (two options: provide an explicit alpha channel or use a particular pixel color to indicate transparency). If the transparency mask can be determined, the mask defines the shape of the cursor; otherwise, the cursor is an opaque rectangle. Typically, the other pixel information (e.g., the R, G and B channels) defines the colors for those parts of the cursor which are not masked out. Note that cursors usually contain at least two colors so that the cursor can be visible over most backgrounds.

<!ENTITY % SVG.cursor.extra.content "" >
<!ENTITY % SVG.cursor.element "INCLUDE" >
<![%SVG.cursor.element;[
<!ENTITY % SVG.cursor.content
    "( %SVG.Description.class; %SVG.cursor.extra.content; )*\
"
>
<!ELEMENT %SVG.cursor.qname; %SVG.cursor.content; >
<!-- end of SVG.cursor.element -->]]>
<!ENTITY % SVG.cursor.attlist "INCLUDE" >
<![%SVG.cursor.attlist;[
<!ATTLIST %SVG.cursor.qname;
    %SVG.Core.attrib;
    %SVG.Conditional.attrib;
    %SVG.XLinkRequired.attrib;
    %SVG.External.attrib;
    x %Coordinate.datatype; #IMPLIED
    y %Coordinate.datatype; #IMPLIED
>

SVG-ＵＡには xlink:href プロパティの参照先として PNG 形式画像のサポートが要求される。

SVG user agents are required to support PNG format images as targets of the xlink:href property.

16.12 Cursor モジュール

16.13 DOM インターフェース

次に挙げるインターフェースが以下で定義される： SVGCursorElement

インターフェース SVGCursorElement

SVGCursorElement インターフェースは 'cursor' 要素に対応する。

IDL 定義

interface SVGCursorElement : 
                SVGElement,
                SVGURIReference,
                SVGTests,
                SVGExternalResourcesRequired { 
  readonly attribute SVGAnimatedLength x;
  readonly attribute SVGAnimatedLength y;
};

属性

readonly SVGAnimatedLength x

'cursor' 要素の x 属性に対応する。

readonly SVGAnimatedLength y

'cursor' 要素の y 属性に対応する。