次に挙げる 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:
以下の 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.
対話性をサポートする 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.
利用者のポインティング装置の行為によって生じる 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.
要素または領域におけるポインタ装置による対話操作には2つの側面がある: There are two distinct aspects of pointer-device interaction with an element or area:
接触判定 によりポインタイベントが生じるかどうかの決定は、ポインタの位置, グラフィックス要素 の大きさと形, 要素の 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.
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:
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);
: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;
文書作成者にとっては、どのような条件下で特定のグラフィックス要素がポインタイベントの標的になれるかを制御したくなる局面がある。 例えば、ポインタがストロークされた図形の境界部に重なるときにのみポインタイベントを受け取れるようにしたい場合や、要素の奥のグラフィックス要素がポインタイベントの標的になれるよう,いかなる状況においても手前の要素がポインタイベントを無視するようにさせたい場合などがある。 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.
例えば、 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:
テキスト要素に対しては、文字セルを基に接触判定が行われる: 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.
ズームとパンとは、全てのグラフィックス要素を同じ量だけ等倍/並進させるような, 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.
アニメーション:不可
一部の対話的視覚表示環境は、いわゆるカーソルと呼ばれるポインタの見栄えを変更する機能を備えている。 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.
このプロパティは、ポインティング装置の表示カーソルの種類を指定する。 それぞれの値は次の意味を持つ: This property specifies the type of cursor to be displayed for the pointing device. Values have the following meanings:
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.
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.
属性定義
カーソルの座標系内におけるポインタの正確な位置を表わす 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.
アニメーション:可カーソルの座標系内におけるポインタの正確な位置を表わす 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.
アニメーション:可カーソルの画像を与えるファイルまたは要素への 関数表記 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.
SVGCursorElement インタフェースは cursor 要素に対応する。 The SVGCursorElement interface corresponds to the ‘cursor’ element.
interface SVGCursorElement : SVGElement, SVGURIReference, SVGTests, SVGExternalResourcesRequired { readonly attribute SVGAnimatedLength x; readonly attribute SVGAnimatedLength y; };