目次詳細目次前章次章要素属性プロパティ

16 対話性

目次

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:

この章では次について述べる: This chapter describes:

他の章にも関連する情報がある: Related information can be found in other chapters:

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

以下の SVG の側面にイベントが作用する: The following aspects of SVG are affected by events:

次の表に、 SVG から認識およびサポートされるすべてのイベントを挙げる。 最初の列のイベント名は、アニメーションの始動/停止イベントを定義するために SVG の アニメーション要素 で利用される名前である。 2列目の DOM2 名 は、 DOM 2 イベントリスナ ([DOM2EVENTS], 1.3 節) を定義するために利用される名前である。 最後の列のイベント属性名は、対応する イベント属性 の名前であり, 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 second column is the name to use when defining DOM 2 event listeners ([DOM2EVENTS], section 1.3). The Event attribute name in the fourth column contains the corresponding name of the event attributes that can be attached to elements in the SVG language.

表中、与えられた種類のイベントが浮上またはキャンセル可能かどうかについての要件は, UA から生成されて配送されるイベントについてのみ適用される。 DocumentEvent インタフェースの createEvent メソッドの利用により,スクリプトから生成される種類のイベントについては、 initEvent メソッドにより,浮上やキャンセルが可能になる。 Requirements in the table on whether an event of a given type bubbles or is cancelable apply only to events that are created and dispatched by the user agent. Events of those types created from script using the createEvent method on the DocumentEvent interface can be made to bubble or be cancelable with the initEvent method.

イベント名 DOM2 名 DOM2 分類 イベント属性名
focusin DOMFocusIn UIEvent onfocusin
text が選択されたときなど、要素がフォーカスを得た時に生じる。 Occurs when an element receives focus, such as when a ‘text’ becomes selected.
focusout DOMFocusOut UIEvent onfocusout
text の選択が解除されたときなど、要素がフォーカスを失った時に生じる。 Occurs when an element loses focus, such as when a ‘text’ becomes unselected.
activate DOMActivate UIEvent onactivate
マウスクリックやキー押下などにより、要素が活性化した時に生じる。 どのように活性化されたかを示唆する数値引数が与えられる: 1 は単純活性化(例えば単純なクリックや Enter キー) 2 はハイパー活性化(例えばダブルクリックやシフトキーを押しながらの Enter キー)。 Occurs when an element is activated, for instance, through a mouse click or a keypress. A numerical argument is provided to give an indication of the type of activation that occurs: 1 for a simple activation (e.g. a simple click or Enter), 2 for hyperactivation (for instance a double click or Shift Enter).
click (同じ) MouseEvent onclick
ポインティング装置のボタンが要素上でクリックされた時に生じる。 クリックとは、画面上の同じ位置における mousedown (ボタン押下)と mouseup (ボタン解放)として定義される。 これらのイベントが生じる順番は: mousedown, mouseup, click である。 複数回のクリックが画面上の同じ位置で生じた場合、この一連のイベントは繰り返され, detail 属性が各反復ごとに1ずつ増加する。 Occurs when the pointing device button is clicked over an element. A click is defined as a mousedown and mouseup over the same screen location. The sequence of these events is: mousedown, mouseup, click. If multiple clicks occur at the same screen location, the sequence repeats with the detail attribute incrementing with each repetition.
mousedown (同じ) MouseEvent onmousedown
ポインティング装置のボタンが要素上で押下された時に生じる。 Occurs when the pointing device button is pressed over an element.
mouseup (同じ) MouseEvent onmouseup
ポインティング装置のボタン押下が要素上で解放された時に生じる。 Occurs when the pointing device button is released over an element.
mouseover (同じ) MouseEvent onmouseover
ポインティング装置が要素上に入った時に生じる。 Occurs when the pointing device is moved onto an element.
mousemove (同じ) MouseEvent onmousemove
ポインティング装置が要素上で動かされた時に生じる。 Occurs when the pointing device is moved while it is over an element.
mouseout (同じ) MouseEvent onmouseout
ポインティング装置が要素上から出た時に生じる。 Occurs when the pointing device is moved away from an element.
DOMSubtreeModified (同じ) MutationEvent なし
この総体的イベントは、文書へのあらゆる変更を通知するためにある。 これは下に挙げるより詳細なイベントの代わりに用いることができる。 (このイベントの正式な定義は DOM2 仕様 を参照のこと。) This is a general event for notification of all changes to the document. It can be used instead of the more specific events listed below. (The normative definition of this event is the description in the DOM2 specification.)
DOMNodeInserted (同じ) MutationEvent なし
ノードが他のノードの子として挿入された後に誘発される。 (このイベントの正式な定義は DOM2 仕様 を参照のこと。) Fired when a node has been added as a child of another node. (The normative definition of this event is the description in the DOM2 specification.)
DOMNodeRemoved (同じ) MutationEvent なし
ノードが別のノードから削除される前に誘発される。 (このイベントの正式な定義は DOM2 仕様 を参照のこと。) Fired when a node is being removed from another node. (The normative definition of this event is the description in the DOM2 specification.)
DOMNodeRemovedFromDocument (同じ) MutationEvent なし
ノードが文書から削除された時に誘発される(ノードを含む部分木が文書から削除される場合も誘発される)。 (このイベントの正式な定義は DOM2 仕様 を参照のこと。) Fired when a node is being removed from a document, either through direct removal of the Node or removal of a subtree in which it is contained. (The normative definition of this event is the description in the DOM2 specification.)
DOMNodeInsertedIntoDocument (同じ) MutationEvent なし
ノードが文書に挿入された時に誘発される(ノードを含む部分木が文書に挿入される場合も誘発される)。 (このイベントの正式な定義は DOM2 仕様 を参照のこと。) Fired when a node is being inserted into a document, either through direct insertion of the Node or insertion of a subtree in which it is contained. (The normative definition of this event is the description in the DOM2 specification.)
DOMAttrModified (同じ) MutationEvent なし
ノードの属性が変更された後に誘発される。 (このイベントの正式な定義は DOM2 仕様 を参照のこと。) Fired after an attribute has been modified on a node. (The normative definition of this event is the description in the DOM2 specification.)
DOMCharacterDataModified (同じ) MutationEvent なし
ノード自身は挿入も削除もされていないがノード内の CharacterData が変更された後に誘発される。 (このイベントの正式な定義は DOM2 仕様 を参照のこと。) Fired after CharacterData within a node has been modified but the node itself has not been inserted or deleted. (The normative definition of this event is the description in the DOM2 specification.)
SVGLoad (同じ) なし onload
このイベントは UA が要素とその子孫要素の構文解析を完了し,対象装置への要素の描画準備が完了したときなど、要素に対する処理準備が完了した時に誘発される。 文書の正当性に欠かせない外部リソースの指定 に対する読み込み, 構文解析, 描画準備はイベントの誘発前に完了していなければならない。 オプションの外部リソースの処理準備完了は、このイベントの誘発には要求されない。 SVGLoad イベントは浮上せずキャンセルもできない。 The event is triggered at the point at which the user agent has fully parsed the element and its descendants and is ready to act appropriately upon that element, such as being ready to render the element to the target device. Referenced external resources that are required must be loaded, parsed and ready to render before the event is triggered. Optional external resources are not required to be ready for the event to be triggered. SVGLoad events do not bubble and are not cancelable.
SVGUnload (同じ) なし onunload
unload は 最も外側の svg 要素 にのみ適用され得る。 unload イベントは DOM 実装が文書をウインドウまたはフレームから削除する時に生じる。 SVGUnload イベントは浮上せずキャンセルもできない。 Only applicable to outermost svg elements. The unload event occurs when the DOM implementation removes a document from a window or frame. SVGUnload events do not bubble and are not cancelable.
SVGAbort (同じ) なし onabort
abort イベントは要素が完全に読み込まれる前にページの読み込みが中止された時に生じる。 SVGAbort イベントは浮上するがキャンセルはできない。 The abort event occurs when page loading is stopped before an element has been allowed to load completely. SVGAbort events bubble but are not cancelable.
SVGError (同じ) なし onerror
error イベントは要素が正しく読み込まれなかった時、あるいはスクリプトの実行時にエラーが生じたときに生じる。 SVGError イベントは浮上するがキャンセルはできない。 The error event occurs when an element does not load properly or when an error occurs during script execution. SVGError events bubble but are not cancelable.
SVGResize (同じ) なし onresize
文書ビューの大きさが変更された時に生じる。 このイベントは 最も外側の svg 要素 にのみ適用可能であり、大きさの変更操作が実効化した後に配送される。 イベントの標的は svg 要素である。 SVGResize イベントは浮上するがキャンセルはできない。 Occurs when a document view is being resized. This event is only applicable to outermost svg elements and is dispatched after the resize operation has taken place. The target of the event is the ‘svg’ element. SVGResize events bubble but are not cancelable.
SVGScroll (同じ) なし onscroll
利用者による操作,あるいは SVGSVGElement インタフェースの currentTranslate プロパティの変更に伴って、文書ビューが X 軸または Y 軸あるいはその両方に沿ってずらされた時に生じる。 このイベントは 最も外側の svg 要素 にのみ適用可能であり、ずらし操作が実効化された後に配送される。 イベントの標的は svg 要素である。 SVGScroll イベントは浮上するがキャンセルはできない。 Occurs when a document view is being shifted along the X or Y or both axis, either through a direct user interaction or any change on the currentTranslate property available on SVGSVGElement interface. This event is only applicable to outermost svg elements and is dispatched after the shift modification has taken place. The target of the event is the ‘svg’ element. SVGScroll events bubble but are not cancelable.
SVGZoom なし なし onzoom
文書ビューにおけるズームの度合いが利用者による操作、あるいは SVGSVGElement インタフェースの currentScale プロパティの変更に伴って変化した時に生じる。 このイベントは 最も外側の svg 要素 にのみ適用可能であり、ズームの変更が終了した後に配送される。 イベントの標的は svg 要素である。 SVGZoom イベントは浮上するがキャンセルはできない。 Occurs when the zoom level of a document view is being changed, either through a direct user interaction or any change to the currentScale property available on SVGSVGElement interface. This event is only applicable to outermost svg elements and is dispatched after the zoom level modification has taken place. The target of the event is the ‘svg’ element. SVGZoom events bubble but are not cancelable.
beginEvent なし なし onbegin
アニメーション要素が始動された時に生じる。 詳細は SMIL アニメーション仕様 [SMILANIM] の TimeEvent インタフェースの記述を参照。 Occurs when an animation element begins. For details, see the description of Interface TimeEvent in the SMIL Animation specification.
endEvent なし なし onend
アニメーション要素の停止時に生じる。 詳細は SMIL アニメーション仕様 の TimeEvent インタフェースの記述を参照。 Occurs when an animation element ends. For details, see the description of Interface TimeEvent in the SMIL Animation specification.
repeatEvent なし なし onrepeat
アニメーション要素が繰り返された時に生じる。 最初の反復の後の各繰り返しごとに生じる。 詳細は SMIL アニメーション仕様 の TimeEvent インタフェースの記述を参照。 Occurs when an animation element repeats. It is raised each time the element repeats, after the first iteration. For details, see the description of Interface TimeEvent in the SMIL Animation specification.

DOM2 キーイベント ([DOM2EVENTS], 1.6.3 節) で述べられている様に、 SVG の仕様にはキーイベントセットが提供されていない。 キーボード入力装置のためのイベントセットは将来版の DOM と SVG 仕様に含まれる予定である。 As in DOM 2 Key events ([DOM2EVENTS], section 1.6.3), 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.

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.

イベントの検知のための イベントリスナ属性 を要素に指定できる。 それらの属性にあてがわれたスクリプトは、「浮上」および「標的上」過程( "bubbling" and "at target" phase )においてのみ,要素に配送されるイベントに反応する。 Event listener attributes can be specified on some elements to listen to a given event. The script in such attributes is run only in response to "bubbling" and "at target" phase events dispatched to the element.

同様に、 アニメーション要素begin, end 属性に用いられる event-value タイミング指定子 は、「浮上」および「標的上」過程においてのみ,関連する要素に配送されるイベントに反応して実際の時刻に解決される。 Likewise, event-value timing specifiers used in animation element ‘begin’ and ‘end’ attributes are resolved to concrete times only in response to "bubbling" and "at target" phase events dispatched to the relevant element.

16.3 UI (ユーザインタフェース)イベント

対話性をサポートする UA 向けに,文書作成者が UI イベント(ユーザインタフェース・イベント)に反応できるように SVG 文書を定義することは、ごく一般的に行われる。 UI イベントには ポインタイベント, キーボードイベント, 文書イベントがある。 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.

文書作成者は UI イベントへの反応として、アニメーションの始動, 他のウェブページへのハイパーリンクの実行, 文書の一部のハイライト(例えばポインタに重なるグラフィックス要素の色を変化させるなど), 「ロールオーバー( 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.

16.4 ポインタイベント

利用者のポインティング装置の行為によって生じる UI イベントはポインタイベントと呼ばれる。 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-UA は,ポインタイベントの標的要素( 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.

ポインタイベントの標的が存在する場合、イベントは通常の イベントフロー ([DOM2EVENTS], 1.2 節) に従って,その要素へ配送される。 しかしながら,標的要素が use 要素による非公開木に属する場合、イベントフローには SVGElementInstance オブジェクトが含まれることになることに注意。 詳細は use 要素を見よ。 If a target element for the pointer event exists, then the event is dispatched to that element according to the normal event flow ([DOM2EVENTS], section 1.2). Note, however, that if the target element is in a ‘use’ element shadow tree, that the event flow will include SVGElementInstance objects. See The ‘use’ element for details.

ポインタイベントの標的要素が存在しない場合、イベントは無視される。 If a target element for the pointer event does not exist, then the event is ignored.

16.5 接触判定と UI イベントの処理順序

要素または領域におけるポインタ装置による対話操作には2つの側面がある: There are two distinct aspects of pointer-device interaction with an element or area:

  1. ポインタイベント(マウスの移動やクリック等)が要素の対話領域内で生じたかどうかを決定するための接触判定,および後続の DOM イベントフロー。 hit-testing, to determine if a pointer event (such as a mouse movement or mouse click) occurred within the interaction area of an element, and the subsequent DOM event flow;
  2. 関連する要素に結びつけられたアクションの機能処理。 functional processing of actions associated with any relevant element.

16.5.1 接触判定

接触判定 によりポインタイベントが生じるかどうかの決定は、ポインタの位置, グラフィックス要素 の大きさと形, 要素の pointer-events プロパティの算出値に依存する。 以下で定義する pointer-events プロパティは、与えられた種類のグラフィックス要素がポインタイベントに反応する正確な領域を表現するものになる。 Determining whether a pointer event results in a positive hit-test depends upon the position of the pointer, the size and shape of the graphics element, and the computed value of the ‘pointer-events’ property on the element. The definition of the ‘pointer-events’ property below describes the exact region that is sensitive to pointer events for a given type of graphics element.

svg 要素は グラフィックス要素 ではないことに注意。 適合 SVG 独立ファイル最も根元の svg 要素 は、イベントがこの要素まで浮上することはあっても、決してポインタイベントの標的にはならない。 グラフィックス要素 に対する 接触判定 の結果,ポインタイベントが生じなかった場合、コンテクストメニューの表示や SVG 文書片のズームやパンの制御など, UA 固有の ウィンドウのふるまいが呼び出されるべきである。 Note that the ‘svg’ element is not a graphics element, and in a Conforming SVG Stand-Alone File a rootmost ‘svg’ element will never be the target of pointer events, though events can bubble to this element. If a pointer event does not result in a positive hit-test on a graphics element, then it should evoke any user-agent-specific window behavior, such as a presenting a context menu or controls to allow zooming and panning of an SVG document fragment.

この仕様は、参照または他の文書内への包含により埋め込まれた SVG 画像の 最も根元の svg 要素 に対するポインタイベントのふるまいを定義しない。 例えば、 HTML 文書に埋め込まれた 最も根元の svg 要素 がマウスクリックイベントを受け取るかどうかなど。 仕様の将来版においてこのふるまいが定義されるかもしれないが、この仕様の目的においては,ふるまいは実装依存になる。 This specification does not define the behavior of pointer events on the rootmost ‘svg’ element for SVG images which are embedded by reference or inclusion within another document, e.g., whether the rootmost ‘svg’ element embedded in an HTML document intercepts mouse click events; future specifications may define this behavior, but for the purpose of this specification, the behavior is implementation-specific.

16.5.2 イベント処理

UI イベントの標的になる要素は、要素の種類に応じて,あるいはスクリプトによるイベントリスナ, CSS 疑似クラス照合, イベントによるタイミング制御を伴う宣言的アニメーション, など,明示的に結びつけられた対話作用を持つかどうかにより、特有の対話的ふるまいを持ち得る。 与えられた標的要素に対する DOM イベント配送後の UI イベントの処理アルゴリズムとその順序は次のようになる: An element which is the target of a user interface event may have particular interaction behaviors, depending upon the type of element and whether it has explicit associated interactions, such as scripted event listeners, CSS pseudo-classes matches, or declarative animations with event-based timing. The algorithm and order for processing user interface events for a given target element, after dispatching the DOM event, is as follows:

  1. 要素に登録されたいずれかのイベントハンドラが preventDefault() DOM メソッドを呼び出した場合、その要素に対するそれ以上の処理は行われなくなり,イベントは DOM レベル 2 イベント (またはその後継版)に述べられた イベントフロー処理 [DOM2EVENTS] に従う。 If an event handler registered on this element invokes the preventDefault() DOM method, then no further processing for this element is performed, and the event follows the event flow processing as described in DOM Level 2 Events [DOM2EVENTS] (or its successor);
  2. title 要素や xlink:title 属性などにより,要素にタイトルや説明が結びつけられていて、 UA がそれらの情報の表示をサポートしている場合(例えばツールチップやステータスバーによるメッセージなど)、ポインタイベントの種類に応じて適切にその情報が表示されるべきである。 If the element has an associated title or description, such as a ‘title’ element or an ‘xlink:title’ attribute, and the user agent supports the display of such information (e.g. via a tooltip or status-bar message), that information should be displayed, as appropriate to the type of pointer event;
  3. [CSS2], 5.11 節に述べられている :hover, :active, :focus など,要素がポインタイベントの種類に適応した 動的疑似クラスセレクタ に合致する場合、そのクラスのプロパティが適用される。 If the element matches any relevant dynamic pseudo-class selectors appropriate to the type of pointer event, such as :hover, :active, or :focus as described in [CSS2], section 5.11, then the relevant class properties are applied;
  4. event-value タイミング指定子の利用により,要素とイベント型が宣言的アニメーションの起動または取り消しに結びつけられている場合、対応する時刻インスタンスはすべて解決されなければならず,この時刻インスタンス解決(アニメーションをただちに始動または停止するなど)により生じるアクションすべてが行われなければならない。 If the element and the event type are associated with the activation or cancelation of declarative animation though the use of event-value timing specifiers, any corresponding instance times must be resolved, and any conseqential actions of this instance time resolution (such as immediately starting or stopping the animation) must be performed;
  5. 要素がハイパーリンクで(例えば要素の子孫に a 要素があるなど), ポインタイベントの種類がハイパーリンクを起動するものであり(例えばマウスクリックなど), ハイパーリンクの追跡により内容の文脈が変化する場合(例えば異なる文書を開いたり,同じ文書の別の部分へ移動してポインタがこの要素から遠く離れるなど)、この要素に対するそれ以上の処理は行われない。 If the element is a hyperlink (e.g., it is a descendant element of an ‘a’ element), and the pointer event is of a type that activates that hyperlink (e.g. via a mouse click), and if the hyperlink traversal changes the context of the content (e.g. opens a different document, or moves the pointer away from this element by moving to another part of the same document), then no further processing for this element is performed;
  6. 要素が テキスト内容要素 であり,イベントの種類がテキスト選択処理の一部と UA から認識されるものである場合(例えばマウスによるクリック, ドラッグ, ダブルクリックなど)、 テキスト選択 アルゴリズムが実行される。 If the element is a text content element, and the event type is one which the user agent recognizes as part of a text-selection operation (e.g., a mouse click and drag, or a double-click), then the text selection algorithm is performed;
  7. イベントの種類が特別な UI 制御に結びつけられている場合(例えば右クリックや command-クリックによるコンテクストメニューの呼び出し)、UA はコンテクストメニューの表示や SVG 文書片のズームやパン制御を可能にする等,そのような UA 特有のふるまいを呼び出すべきである。 If the event type is one which the user agent associates with the evocation of special user-interface controls (e.g., a right-click or command-click evoking a context menu), the user agent should evoke such user-agent-specific behavior, such as presenting a context menu or controls to allow zooming and panning of an SVG document fragment.

16.6 pointer-events プロパティ

文書作成者にとっては、どのような条件下で特定のグラフィックス要素がポインタイベントの標的になれるかを制御したくなる局面がある。 例えば、ポインタがストロークされた図形の境界部に重なるときにのみポインタイベントを受け取れるようにしたい場合や、要素の奥のグラフィックス要素がポインタイベントの標的になれるよう,いかなる状況においても手前の要素がポインタイベントを無視するようにさせたい場合などがある。 In different circumstances, authors may want to control under what conditions 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.

pointer-events に対するマスキングとクリッピングパスが及ぼす効果は異なる。 クリッピングパスは幾何的な境界であり、点が境界の内側か外側のいずれに位置するかは明瞭に定まる。 したがって,ポインタイベントはクリップされた要素の描画領域においては、通常どおり検知されなければならず、クリップ領域外においては クリッピングパス の定義で述べたように,検知されてはならない。 一方、マスクは二分的ではない画素演算であり,完全に透明な状態と「ほぼ透明」な状態でふるまいが異なるのでは混乱する。 したがって,マスクが適用された要素においては、ポインタイベントはマスクの不透明度が 0 に近い領域でも検知されなければならない。 文書作成者は、ポインタイベントがマスクの透明部分の奥にある要素に渡されるようにしたい場合,マスキングとクリッピングを併用するとよい。 The effects of masking and clipping differ with respect to pointer-events. A clip path is a geometric boundary, and a given point is clearly either inside or outside that boundary; thus, pointer events must be captured normally over the rendered areas of a clipped element, but must not be captured over the clipped areas, as described in the definition of clipping paths. By contrast, a mask is not a binary transition, but a pixel operation, and different behavior for fully transparent and almost-but-not-fully-transparent may be confusingly arbitrary; as a consequence, for elements with a mask applied, pointer-events must still be captured even in areas where the mask goes to zero opacity. If an author wishes to achieve an effect where the transparent parts of a mask allow pointer-events to pass to an element below, a combination of masking and clipping may be used.

例えば、 fillblue の矩形の上に, strokered (すなわち外形線が赤色), fillnone (すなわち内部は塗られない)の円形が直接描画されている状況下で、ポインタが円形の境界部に重なるときにのみ円形がポインタイベントの標的になり,円形の内部にポインタが重なるときは奥の矩形がポインタイベントの標的になるようにさせたい場合など。 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:

pointer-events
値: visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | none | inherit
初期値:visiblePainted
適用対象: グラフィックス要素
継承:される
百分率:N/A
メディア:視覚
アニメーション:
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 has an actual 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 affect 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 affect 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 affect event processing.
painted
要素の「塗られた」領域にポインタが重なっているときに,ポインタイベントの標的要素になれる。 塗られた領域にポインタが重なっているとは、要素の内部(すなわちフィル)に重なっていて, かつ fill プロパティの実際の値が none 以外になっているか,または要素の境界部(すなわちストローク)にポインタが重なっていて, かつ stroke プロパティの実際の値が none 以外になっていることを意味する。 visibility プロパティの値はイベント処理に影響しない。 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 has an actual value other than none or it is over the perimeter (i.e., stroke) of the element and the ‘stroke’ property has an actual 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 affect 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 affect 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 affect event processing.
none
要素はポインタイベントを受け取らない。 The given element does not receive pointer events.

テキスト要素に対しては、文字セルを基に接触判定が行われる: For text elements, hit-testing is performed on a character cell basis:

ラスター画像に対する接触判定は画像全体(すなわち画像の矩形領域が画像がイベントを受け取るかどうかの決定要因の一つ)あるいは画素ごと(すなわちポインタと重なる画素におけるアルファ値が画像がイベントを受け取るかどうかの決定要因の一つ)に行われる: For raster images, hit-testing 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 basis (i.e., the alpha values for pixels under the pointer help determine whether the image receives the event):

ラスター画像においては、 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 affect 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).

パンは、 UI アクションに対する応答として, SVG 文書片に対する並進(すなわちずらして移動させる)変換を表現する。 Panning represents a translation (i.e., a shift) transformation on an SVG document fragment in response to a user interface action.

対話的な利用者環境を利用する SVG-UA には、ズームとパン機能のサポートが要求される。 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 の場合、 UA はズームとパンの制御を切り,利用者に文書片のズームとパンをさせないようにすることになる。 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 の場合、対話的な利用者環境においては, UA は利用者に文書片のズームとパンの操作機能を提供することになる。 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-UA に対し何の効果も生じさせない。 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.

アニメーション:不可

16.8 カーソル

16.8.1 カーソルの概要

一部の対話的視覚表示環境は、いわゆるカーソルと呼ばれるポインタの見栄えを変更する機能を備えている。 3種類のカーソルが利用できる: 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:

cursor プロパティはどのカーソルを用いるかの指定に利用される。 cursor プロパティは crosshair などのキーワード指定による標準の組み込みカーソルや独自のカーソルへの参照に利用できる。 独自のカーソルは <funciri> により参照され、プラットフォーム特有のカーソルファイルのような外部リソースやプラットフォーム非依存のカーソルを定義する 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 <funciri> 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 プロパティ

cursor
値: [ [<funciri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit
初期値:auto
適用対象: コンテナ要素, グラフィックス要素
継承:される
百分率:N/A
メディア:視覚, 対話
アニメーション:

このプロパティは、ポインティング装置の表示カーソルの種類を指定する。 それぞれの値は次の意味を持つ: This property specifies the type of cursor to be displayed for the pointing device. Values have the following meanings:

auto
UA は現在の文脈に応じて表示するカーソルを定める。 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.
<funciri>
UA は URI が指すリソースからカーソルを取得する。 UA はカーソルのリストを先頭から順に調べて、自身が扱える最初のカーソルを利用する。 どの利用者定義のカーソルも扱えない場合、 UA はリストの最後の汎用カーソルを利用しなければならない。 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.svg#curs"), text; }

SVG の cursor プロパティは CSS2 が定める cursor プロパティ ([CSS2], 18.1 節) と同じであるが、加えて、 SVG-UA は SVG の cursor 要素により定義されるカーソルもサポートしなければならない。 これは PNG をラスター成分とするクロスプラットフォームで相互運用性のある単一のカーソル形式を与える。 The ‘cursor’ property for SVG is identical to the ‘cursor’ property defined in CSS2 ([CSS2], section 18.1), with the additional requirement that SVG user agents must support cursors defined by the SVG ‘cursor’ element. This gives a single, cross-platform, interoperable cursor format, with PNG as the raster component.

16.8.3 cursor 要素

cursor 要素をプラットフォーム非依存の独自カーソルの定義に利用できる。 推奨される方法は、まず PNG 画像 [PNG] を作成し, 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 image [PNG] 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 形式が推奨される理由は、アルファチャンネルによる透明度マスクを定義する機能がサポートされていることによる。 異なる画像形式が利用された場合、その形式は透明度マスクの定義をサポートすべきである(2通りの方法がある:明示的にアルファチャンネルを与えるか、特定の色が透明であることを指示するか)。 透明度マスクが定められれば、マスクがカーソルの形状を定義する。 そうでなければ、カーソルの形状は不透明な矩形となる。 一般には、他の画素情報(例えば R, G, B チャンネル)はマスクで切り取られない部分におけるカーソルの色を定義する。 カーソルは背景がどうであっても視認できるよう、通常は少なくとも2色以上持たせることに注意。 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.

cursor
分類:
None
内容モデル:
以下の要素の任意個数, 任意順序の組み合わせ:
属性:
DOM インタフェース:

属性定義

x = "<coordinate>"

カーソルの座標系内におけるポインタの正確な位置を表わす X 座標 The x-coordinate of the position in the cursor's coordinate system which represents the precise position that is being pointed to.

この属性が指定されないときの効果は、値 0 が指定されたときと同じになる。 If the attribute is not specified, the effect is as if a value of '0' were specified.

アニメーション:
y = "<coordinate>"

カーソルの座標系内におけるポインタの正確な位置を表わす X 座標 The y-coordinate of the position in the cursor's coordinate system which represents the precise position that is being pointed to.

この属性が指定されないときの効果は、値 0 が指定されたときと同じになる。 If the attribute is not specified, the effect is as if a value of '0' were specified.

アニメーション:
xlink:href = "<funciri>"

カーソルの画像を与えるファイルまたは要素への 関数表記 IRI 参照 A Functional IRI reference to the file or element which provides the image of the cursor.

アニメーション:

SVG-UA には xlink:href プロパティの参照先として PNG 形式画像のサポートが要求される。 SVG user agents are required to support PNG format images as targets of the ‘xlink:href’ attribute.

16.9 DOM インタフェース

16.9.1 インタフェース SVGCursorElement

SVGCursorElement インタフェースは cursor 要素に対応する。 The SVGCursorElement interface corresponds to the ‘cursor’ element.

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

与えられた cursor 要素の x 属性に対応する。 Corresponds to attribute ‘x’ on the given ‘cursor’ element.

y (readonly SVGAnimatedLength)

与えられた cursor 要素の y 属性に対応する。 Corresponds to attribute ‘y’ on the given ‘cursor’ element.

目次詳細目次前章次章要素属性プロパティ