15. スクリプト処理と対話性 — Scripting and Interactivity

15.1. 序論

~SVG内容は、 次に挙げる~SVG言語における特能を用立てることにより，対話的にできる （すなわち、利用者から起動された~eventに応答可能になる）： ◎ SVG content can be interactive (i.e., responsive to user-initiated events) by utilizing the following features in the SVG language:

• ~pointing装置（例：~mouse）上で~buttonを押下げるなどの，利用者から起動された動作は、 `~animation＠~SVGanim$や`~script＠#ScriptElement$を実行させられる。 ◎ User-initiated actions such as button presses on the pointing device (e.g., a mouse) can cause animations or scripts to execute.
• ~pointing装置の位置が特定0の~graphics要素に重なるとき、 ~mouse~clickなどの動作により， 利用者は新たな~Web~pageへの~hyperlinkを起動できる （`~SVG内容から外への~link$secを見よ）。 ◎ 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における~scriptingと~DOM~eventの取扱いについて述べる — `~event＠#SVGEvents$は，どの状況下で誘発されるかも含め。 ◎ This chapter describes scripting and DOM event handling in interactive SVG, including under which circumstances events are triggered.

関係する情報は、 他の章にも見出せる： ◎ Related information can be found in other chapters:

• ~hyperlinkについては、 `§ ~link法＠~SVGlinking$にて論じられる。 ◎ hyperlinks are discussed in Links
• ~animationについては、 `§ ~SVG文書の~animate法＠~SVGmisc#animate$にて論じられる。 ◎ animation is discussed in Animating SVG Documents

15.2. ~supportされる~event

~eventは、~SVG次の側面に影響する： ◎ The following aspects of SVG are affected by events:

• ~scriptは、 `~SVG~DOM＠~SVGtypes#SVGDOMOverview$において， `EventTarget$I ~interfaceの［ `addEventListener()$n ／ `removeEventListener()$n ］を利用して，~DOM~event~listenerを［ 追加する／除去する ］ことができる — ~event~target上で所与の~eventが生じたとき，~scriptを［ 呼出す／無視する ］ことができるよう。 `DOM$r ◎ Using SVG Document Object Model (DOM), a script can add or remove DOM event listeners ([DOM]) so that script can be invoked or ignored when a given event occurs on an event target
• ~SVGの`~animation要素$は、 ~eventに基づいて［ 始動する／終止する ］よう定義できる。 ◎ SVG's animation elements can be defined to begin or end based on events.

~SVG 1.1 に定義されていた いくつかの~event — `SVGLoad^et, `SVGError^et 等々 — は、［ `~UI-Eventsにて定義される＠~UIEVENTS#events-uievent-types$ ／ `~HTMLにて定義される＠~HTMLindex#events-2$ ］等価な接頭辞（ `SVG^l ）なしの~eventに置換された。 ◎ A number of events defined in SVG 1.1, SVGLoad, SVGError etc, have been replaced with the equivalent unprefixed events defined in UI EVENTS and HTML.

もっと現代的な~eventを~SVG内で利用する，何らかの例を入れるべき — 例： ~touch~event（~touch~event仕様への参照も伴わせて）など。 `機器~方位~event＠~DEVICEORIENTATION$も，関心を引くかもしれない。 ◎ There should be some more modern examples of using events in svg, e.g touch events (w reference to touch events spec). Device orientation events might also be of interest.

以下の表tに，この仕様が定義する~event, および［ 他の仕様が定義する~eventのうち，更なる要件や明確化があるもの ］を挙げる。 ◎ The following table lists the events defined by this specification, or that have further requirements or clarifications compared to the specification(s) where they are defined.

1 列目 “~event名” は、 ~animationを［ 開始する／終止する ］~eventを定義するために，~SVGの`~animation要素$の中で利用する名前を与える。 2 列目 “~UI~event名” は、 `~DOM~event~listenerを定義するとき＠~DOM4#dom-eventtarget-addeventlistener$ `DOM$r に利用する名前【 %type （~event型）】を与える。 ◎ 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 UI Event name in the second column is the name to use when defining DOM event listeners ([DOM], section 3.6).

表t内に挙げられていない~event — ~HTMLや~UI-Eventsにて導入された~eventなど — 用の~~対応する`~event型$は、 ~SVGの`~animation要素$の中で利用する名前になる。 ◎ For events not listed in the table, such as events introduced in HTML or UI Events, the respective event type is the name to use within SVG's animation elements.

表t内の，所与の型の~eventが［ 浮上する／ 取消~可能 ］かどうかについての要件は、 ~UAにより作成されて配送された~eventに限り適用される。 ~scriptにより `Document$I 上の `createEvent()^m ~methodを利用して作成された~eventは、 `initEvent()$n ~methodで［ 浮上する ／ 取消~可能になる ］ようにできる。 【各種~event~interfaceの構築子で作成するときも、その引数により，そうなるよう指定できる。】 ◎ 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 Document interface can be made to bubble or be cancelable with the initEvent method.

~UI-Events用の各種~event型~用の~event~listenerに渡される~parameterの詳細は、 `uievents$r, `DOM$r 仕様に見出せる。 他の~event型~用の~event~listenerに渡される~parameterは、 この仕様の他所にて述べる。 ◎ Details on the parameters passed to event listeners for the event types for UI Events can be found in the ([uievents]) and ([DOM]) specifications. For other event types, the parameters passed to event listeners are described elsewhere in this specification.

同様に，`~animation要素$の［ `begin$a, `end$a ］属性~内で利用される時機~指定子 `event-value$P は、 ~eventが，その［ `浮上~相$ ／ `~target相$ ］に関連な要素に配送されるときに呼応して — そのときに限り — 具象的な時刻に解決される。 ◎ 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.

15.3. ~UI~event

対話性を~supportする~UAに対しては、 作者は，~SVG文書を~UI~eventに応答可能になるように定義することは共通的にある。 アリな利用者~eventの集合には、［ `~pointer~event＠#PointerEvents$, ~keyboard~event, 文書~event ］がある。 ◎ 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~eventに呼応して様々なことを行い得る： ~animationを開始する／ 別の~Web~pageへの~hyperlinkを遂行する／ 文書の一部を強調する（例： ~pointerに重なっている~graphics要素の色を変更する）／ “`roll-over^en” を起動する（例：それまで隠されていた~graphics要素を，~pointerの近くに現れさせる ）／ ~remote~databaseと通信する~scriptを立上げる, 等々。 ◎ 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.

15.4. ~pointer~event

~pointer装置~上で遂行された利用者~動作により生じる~UI~eventは、 ~pointer~eventと呼ばれる。 ◎ User interface events that occur because of user actions performed on a pointer device are called pointer events.

多くの~systemは、 ~mouseや~trackballなどの~pointer装置を~supportする。 ~mouseを利用する~system上では、 ~pointer~eventは，~mouseの動きや~mouse~clickなどの動作からなる。 異なる~pointer装置を利用する~system上では、 ~pointing装置は，［ 等価な利用者~動作~用の仕組みを供することにより，~mouseの挙動を模倣する ］ことが多い — ~buttonを押下げるのを，~mouse~clickと等価にするなど。 ◎ 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は、 各~pointer~eventに対し，その`~target要素^emを決定する。 ~target要素は、 ~graphics要素のうち［ それに関連な~graphicな内容は、 ~eventの時点で~pointerに重なっているもの ］のうち，最上層にあるものになる。 （ 要素に関連な~graphicな内容が~pointerに重なっているかどうかを決定する方法 — したがって~graphic要素は，どの状況下で~pointer~event用の~target要素になれるか — についての記述は、 `pointer-events$p ~propを見よ）。 表示されない要素は （すなわち、要素または，そのある先祖の `display$p ~propは値 `none^v にされているとき）、~pointer~eventの~targetになり得ない。 ◎ 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.

~pointer~event用の~target要素が存在する場合、 通常の`~event~flow＠~UIEVENTS#event-flow$ `uievents$r に則って，~eventはその要素に向けて配送される。 ［ `use$e 要素により／ ~scriptを介して ］作成された~shadow~treeに対しては、 ~eventは `dom$r による `~eventの配送-法＠~DOM4#dispatching-events$に従うモノトスル。 ◎ If a target element for the pointer event exists, then the event is dispatched to that element according to the normal event flow ([uievents], section 3.1). For shadow trees created by the ‘use’ element or via script, the event must follow Dispatching Events [dom]

~pointer~event用の~target要素は存在しない場合、 その~eventは無視される。 ◎ If a target element for the pointer event does not exist, then the event is ignored.

15.5. ~UI~event用の接触判定と処理~順序

`接触判定@ （ `hit-testing^en ）とは、［ ~pointerが所与の`~graphics要素$に交差するかどうか ］を決定する処理-をいう。 接触判定は，~mouse~eventをどの要素へ配送するか決定するときに利用され、 利用者が~pointing装置を動かすのに呼応して，あるいは 文書~内の要素の［ 位置, 図形や他の属性 ］における変化により，行われ得る。 接触判定は、 `hit detection^en または `picking^en と称されることもある。 `pointer-events$p ~propの定義も見よ。 ◎ hit-testing • The process of determining whether a pointer intersects a given graphics element. Hit-testing is used in determining which element to dispatch a mouse event to, which might be done in response to the user moving the pointing device, or by changes in the position, shape and other attributes of elements in the document. Hit-testing is also known as hit detection or picking. See also the definition of the pointer-events property.

~pointer装置による要素や区画との対話には、 2 つの別個な側面がある： ◎ There are two distinct aspects of pointer-device interaction with an element or area:

1. ある~pointer~event（~mouseの動きや~mouse~clickなど）が要素の対話~区画の中で生じたかどうか決定するための接触判定と、 後続な~DOM~event~flow。 ◎ 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.

15.6. `pointer-events^p ~prop

作者は、どの状況下にあるかに応じて［ 特定0の~graphic要素は、 どの条件で~pointer~eventの~targetになり得るか ］を制御したいと求めることもある。 例えば，作者は［ 所与の要素は、 所与の図形が~strokeされた周界に~pointerが重なるときに限り，~pointer~eventを受取る ］ようにしたいと求めることもあろう。 他の事例では、作者は［ ~~背後にある~graphicな要素が~pointer~eventの~targetになるよう、 所与の要素は，どの状況下でも~pointer~eventを無視する ］ようにしたいと求めることもあろう。 ◎ 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.

［ ~masking, 切抜き ］の効果は、 `pointer-events$p に関して相違する： ◎ The effects of masking and clipping differ with respect to pointer events.＼

• `切抜き~path$は幾何的な境界であり、 所与の点がその境界の内側, 外側どちらに入るかは明瞭になる。 したがって，~pointer~eventは、 切抜かれた要素の描画された区画に~pointerが重なるかどうか — すなわち、`切抜き~path$の定義に従って，~pointerが~pathの内側に入るかどうか — に応じて［ 重なる（入る）ならば捕捉される ／ 重ならないならば捕捉されない ］モノトスル。 ◎ 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.＼

• 対照的に，~maskは、 二値的な遷移ではなく画素~演算であり、 全部的に透明な所†, それにほぼ近い所とで挙動が異なれば， その~~境目は恣意的にならざるを得ず紛らわしくなる。 その帰結として、 ~maskが適用された要素に対しては、 ~maskの不透明度†が 0 の区画であろうが，~pointer~eventは捕捉されるモノトスル。 作者は，望むなら、 ~maskingと切抜きを組合せて利用して［ ~maskの透明な部位においても，~pointerに重なる要素に~pointer~eventを渡すことを許容する効果 ］を達成できる。 ◎ 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.

  【† ~alpha~maskの場合の~mask画像の不透明度を指している。 不透明度 0 は、 `~mask値＠~MASKING1#MaskValues$が 0 ， したがって完全に~maskされて見えなくなる所。 】

`filter$p ~propには，~pointer~event処理に対する効果は無い — この文脈においては `filter$p は指定されていなかったかのように扱うモノトスル。 ◎ The filter property has no effect on pointer events processing, and must in this context be treated as if the filter wasn't specified.

例えば、［ `stroke$p は `red^v, `fill$p は `none^v ］にされた真円が （すなわち、外形線はベタな~red, 内域は塗られない）， `fill$p は `blue^v にされた矩形の上に直に描画されるとする。 作者は、［ ~pointerが真円の周界に重なるときに限り，真円を~pointer~eventの~targetにして、 ~pointerが真円の内域に重なるときには，下層の矩形が~pointer~eventの~target要素になる ］ようにしたいと求めることもあろう。 ◎ 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$p ~propは、 所与の要素が どの状況下で~pointer~eventの~target要素になり得るかを指定する。 それは、次に挙げるものが処理される状況下に影響する： ◎ The pointer-events property specifies under what circumstances a given element can be the target element for a pointer event. It affects the circumstances under which the following are processed:

• ~mouse~clickなどの~UI~event ◎ user interface events such as mouse clicks
• `動的~疑似類$（すなわち， `hover^ps ／ `active^ps ／ `focus^ps ） `CSS2$r, §5.11 ◎ dynamic pseudo-classes (i.e., :hover, :active and :focus; [CSS2], section 5.11)
• ~hyperlink（`~SVG内容から外への~link$secを見よ） ◎ hyperlinks (see Links out of SVG content: the ‘a’ element)

所与の要素 （ただし、~text要素, ~raster画像は除く — それらについては後述する） は、［ `pointer-events$p の値に応じて，対応する記述に与える条件が満たされる ］とき，~pointer~event用の~target要素になれる： ◎ ↓

`auto^v

既定の挙動。 `visiblePainted^v のときと同じに挙動する。 ◎ The default behavior, which is the same as for visiblePainted.

`bounding-box^v

~pointerは要素の`限界~box$に重なる ◎ The given element can be a target element for pointer events when the pointer is over the bounding box of the element.

`visiblePainted^v

［ 要素の `visibility$p ~propの値は `visible^v ］~AND［ ~OR↓ （ ~pointerは要素が “塗られる区画” に重なる） ］：

• ［ ~pointerは要素の内域（すなわち~fill）に重なる ］~AND［ 要素の `fill$p ~propの実際の値†は `none^v 以外 ］
• ［ ~pointerは要素の周界（すなわち~stroke）に重なる ］~AND［ 要素の `stroke$p ~propの値は `none^v 以外 ］

◎ 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.

【† `実際の値$： `fill^p ~prop値が~URL参照で，その~URLから妥当な資源を取得できなかった場合も織り込むための記述（ `~~参照先＠https://www.w3.org/2003/01/REC-SVG11-20030114-errata#pointer-events-fallback-values$ ）。 下の `painted^v 値では， `stroke^p ~propにも “実際の値” を利用しているが、 なぜ，ここと異なるのかは不明。 】

`visibleFill^v

［ 要素の `visibility$p ~propの値は `visible^v ］~AND［ ~pointerは要素の内域（すなわち~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.＼

（ `fill$p ~propの値は、~event処理には影響しない。） ◎ The value of the fill property does not affect event processing.

`visibleStroke^v

［ 要素の `visibility$p ~propの値は `visible^v ］~AND［ ~pointerは要素の周界（すなわち~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.＼

（ `stroke$p ~propの値は、~event処理には影響しない。） ◎ The value of the stroke property does not affect event processing.

`visible^v

［ 要素の `visibility$p ~propの値は `visible^v ］~AND［ ~pointerは要素の内域（すなわち~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.＼

（ `fill$p, `stroke$p ~propの値は、~event処理には影響しない。） ◎ The values of the fill and stroke do not affect event processing.

`painted^v

~OR↓ が満たされる（ ~pointer要素が “塗られる区画” に重なる）：

• ［ ~pointerは要素の内域（すなわち~fill）に重なる ］~AND［ 要素の `fill$p ~propの実際の値は `none^v でない ］
• ［ ~pointerは要素の周界（すなわち~stroke）に重なる ］~AND［ 要素の `stroke$p ~propの実際の値は `none^v でない ］

◎ 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.＼

（ `visibility$p ~propの値は、~event処理には影響しない。） ◎ The value of the visibility property does not affect event processing.

`fill^v

~pointerは，要素の内域（すなわち~fill）に重なる ◎ The given element can be the target element for pointer events when the pointer is over the interior (i.e., fill) of the element.＼

（ `fill$p, `visibility$p ~propの値は、~event処理には影響しない。） ◎ The values of the fill and visibility properties do not affect event processing.

`stroke^v

~pointerは要素の周界（すなわち~stroke）に重なる ◎ The given element can be the target element for pointer events when the pointer is over the perimeter (i.e., stroke) of the element.＼

（ `stroke$p, `visibility$p ~propの値は、~event処理には影響しない。） ◎ The values of the stroke and visibility properties do not affect event processing.

`all^v

~pointerは，要素の内域（すなわち~fill）または周界（すなわち~stroke）に重なる ◎ 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.＼

（ `fill$p, `stroke$p, `visibility$p ~propの値は、~event処理には影響しない。） ◎ The values of the fill, stroke and visibility properties do not affect event processing.

`none^v

決して満たされない条件 （所与の要素は、~pointer~eventを受取らない。） ◎ The given element does not receive pointer events.

~text要素~用の接触判定は、 文字~cellを基に遂行される。 要素は、［ `pointer-events$p の値に応じて，対応する記述に与える条件が満たされる ］とき，~text文字列を成す どの文字の~cellの中でも，~eventを受取れる： ◎ For text elements, hit-testing is performed on a character cell basis: ◎ ↓

`visiblePainted^v

［ 要素の `visibility$p ~propの値は `visible^v ］~AND［［ 要素の `fill$p ~propの値は `none^v 以外 ］~OR［ 要素の `stroke$p ~propの値は `none^v 以外 ］］ ◎ 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^v

`visibleStroke^v

`visible^v

要素の `visibility$p ~propの値は `visible^v （これらの値は、等価である） ◎ 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.＼

（ `fill$p, `stroke$p ~propの値は、~event処理には影響しない。） ◎ The values of the fill and stroke properties do not affect event processing.

`painted^v

［ 要素の `fill$p ~propの値は `none^v 以外 ］~OR［ 要素の `stroke$p ~propの値は `none^v 以外 ］ ◎ 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.＼

（ `visibility$p ~propの値は、~event処理には影響しない。） ◎ The value of the visibility property does not affect event processing.

`fill^v

`stroke^v

`all^v

無条件 ◎ The values fill, stroke and all are equivalent and indicate that the text string can receive events anywhere within the character cell.＼

（ `fill$p, `stroke$p, `visibility$p ~propの値は、~event処理には影響しない。） ◎ The values of the fill, stroke and visibility properties do not affect event processing.

`none^v

決して満たされない条件（所与の~textは~pointer~eventを受取らない。） ◎ The value none indicates that the given text does not receive pointer events.

~raster画像~用の接触判定は、 画像の限界域を成す矩形に基づいて遂行される。 要素は［ ~pointerは画像の矩形に重なっている ］~AND［ `pointer-events$p の値に応じて，以下に与える対応する条件が満たされる ］とき，~eventを受取れる： ◎ For raster images, hit-testing is performed on a whole-image basis (i.e., the rectangular area for the image is the determinant for whether the image receives the event): ◎ ↓

`visiblePainted^v

`visibleFill^v

`visibleStroke^v

`visible^v

要素の `visibility$p ~propの値は `visible^v ◎ The value visiblePainted means that the raster image can receive events anywhere within the bounds of the image, with the additional requirement that the visibility property is set to 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^v

`fill^v

`stroke^v

`all^v

無条件 ◎ The value painted means that the raster image can receive events anywhere within the bounds of the image. The value of the visibility property does not affect event processing. ◎ The values fill, stroke and all are equivalent and indicate that the image can receive events anywhere within the rectangular area for the image.＼

（ `visibility$p ~propの値は、~event処理には影響しない。） ◎ The value of the visibility property does not affect event processing.

`none^v

決して満たされない条件（画像は~pointer~eventを受取らない） ◎ The value none indicates that the image does not receive pointer events.

`foreignObject$e 要素に対しては、 `接触判定$は，要素の`~obj限界~box$を成す矩形な区画~上で遂行される。 上の~raster画像~用の処理を見よ。 ~UAは、接触判定の~targetとして， `foreignObject^e 要素を成す外来な内容も許容してヨイ。 ◎ For ‘foreignObject’ elements, hit-testing is performed on the rectangular area, the object bounding box, of the element. See processing for raster images above. Useragents may allow the foreign content of a ‘foreignObject’ element to be target of hit-testing as well.

次に挙げる~propの値は、~event処理には影響しない ⇒ `opacity$p, `fill-opacity$p, `stroke-opacity$p, `fill$p, `stroke$p ◎ The values of properties opacity, fill-opacity, stroke-opacity, fill and stroke do not affect event processing.

15.7. ~focus

~SVGは、この節に述べるように~SVG用に改変されることを除き， ~HTMLと同じ `~focus~model＠~HTMLinteraction#focus$を利用する。 所与の時点で各~文書~内で`~focusされて$いる要素は、 1 個までとする。 一体としての文書が~systemから~focusを得ている下では、 この要素が，すべての~keyboard~eventの~targetになる。 ◎ SVG uses the same focus model as HTML, modified for SVG as described in this section. At most one element in each document is focused at a time; if the document as a whole has system focus, this element becomes the target of all keyboard events.

要素は、~focusされている間は，~CSS `focus$ps 疑似類に合致する。 対話的~UAは、［ ~keyboardその他の非~pointing装置からの利用者~入力~eventにより，~focusが変化した ］ときには，~focusを視覚的に指示するモノトスル（通例的には外形線で） — また、常時~focusを指示してもヨイ。 作者は `focus^ps 疑似類を利用して， 視覚的な指示を当の~graphicに より相応しいものに置換してもヨイが（図形~上の~strokeなど）、 ~focusの視覚的な指示を完全に除去するために利用するベキでない。 ◎ When an element is focused, the element matches the CSS :focus pseudo-class. Interactive user agents must visually indicate focus (usually with an outline) when the focus changes because of a user input event from the keyboard or other non-pointing device and may indicate focus at all times. Authors may use the :focus pseudo-class to replace the visual indication with one more suitable to the graphic, (such as a stroke on a shape) but should not use it to remove visual indications of focus completely.

次に挙げる~SVG要素は、 対話的~文書において `~focus可能@ とされる。 `~use要素の~shadow~tree$内にある，そのような要素を成す`要素~instance$も、 ~focus可能とする。 ~HTML~focus~modelの目的においては、 対話的~UAは，それらを`~focus可能な区画$として扱うモノトスル： 【！廃／不要 — その`~tabindex~focus~flag$は ~T に設定するベキである】 ◎ The following SVG elements are focusable in an interactive document. Any instance of such an element in a use-element shadow tree is also focusable. For the purpose of the HTML focus model, interactive user agents must treat them as focusable areas whose tabindex focus flag should be set:

• 文書~根~要素 ◎ the document root element
• ~~任意の要素（ `foreignObject$e の中にあるものなど）のうち，~scroll可能な領域を生成するもの。 ◎ any element (such as within a ‘foreignObject’) that generates a scrollable region
• 直に`描画される要素$のうち， `tabindex$a 属性を有していて，その値は妥当な整数であるもの ◎ any directly rendered element with a valid integer ‘tabindex’ attribute

~UAが給した~controlの事例では、 要素は，複数の~focus可能~区画を各~下位-~control用に備え得る。 ◎ In the case of user-agent supplied controls, the element may have more than one focusable area, for each sub-control.

加えて、 すべての `a$e 要素のうち，その~linkは妥当であるものは、 `~focus可能$になるモノトスル。 【！廃 — それらの`~tabindex~focus~flag$は、~T にモノトスル。】 ただし、~UAが，~keyboardによる~linkの辿りを成す代替~手法を恒常的に供する場合は除く。 ◎ In addition, all ‘a’ elements that are valid links are focusable, and their tabindex focus flag must be set unless the user agent normally provides an alternative method of keyboard traversal of links.

SVG Tiny 1.2 の `focusable$a 属性が利用されている内容との互換性を得るため、 ~UAは，その属性が `true^v にされた要素を~focus可能として扱うベキである。 作者は，新たな内容においては、 `focusable^a 属性を省略するか， 対応する `tabindex^a 値 `0^v との組合nに限り利用するベキである。 ◎ For compatibility with content that used the SVG Tiny 1.2 focusable attribute, user agents should treat an element with a value of true for that attribute as focusable. In new content, authors should either omit the focusable attribute or use it only in combination with a corresponding tabindex value of 0.

~UAは、他の要素を~focus可能として扱ってもヨイ — 特に、~keyboardによる対話が，利用者~入力の唯一かつ首な手段である場合。 ~UAは特に、［ ~keyboard~focusを利用して， `title$e 要素の~textを~tooltipとして露わにする ］ことを~supportしてもヨイ ／ ［ ~mouse／ ~pointer／ ~focus~event ］用の~listenerがアテガわれた要素に，~focusが達するのを許容してもヨイ。 作者は、この挙動に依拠するベキでない — すべての対話的な要素は、 ~keyboardによる対話を直に~supportするベキである。 ◎ User agents may treat other elements as focusable, particularly if keyboard interaction is the only or primary means of user input. In particular, user agents may support using keyboard focus to reveal ‘title’ element text as tooltips, and may allow focus to reach elements which have been assigned listeners for mouse, pointer, or focus events. Authors should not rely on this behavior; all interactive elements should directly support keyboard interaction.

逐次的~focus順序は、 `~focus可能$な要素の集合から，［ ~SVG要素の `tabindex$a 属性を， ~HTML要素の`同じ名前の属性＠~HTMLinteraction#the-tabindex-attribute$と同じ仕方 ］で処理して生成される。 この~focus順序には、 `~use要素の~shadow~tree$の中の内容も — それが `use$e 要素の子~内容であったかのように — 挿入される。 ◎ The sequential focus order is generated from the set of all focusable elements, processing ‘tabindex’ attributes on SVG elements in the same way as tabindex attributes on HTML elements. Content within a use-element shadow tree is inserted in the focus order as if it was child content of the ‘use’ element.

`描画されない要素$は、 — `tabindex$a 属性の値に関わらず — ~focusを受取ることは決してない。 ［ 描画されない／~focus不能な ］要素に対し，~scriptから~program的に~focusをアテガおうとしても、 その~callは中止される。 しかしながら，［ 可視でない／~screen外にある ］要素であっても、 依然として`描画される要素$になり得ることに注意。 ◎ A non-rendered element can never receive focus, regardless of the value of the ‘tabindex’ attribute, If a script programmatically assigns focus to a non-rendered or otherwise un-focusable element, the focusing call is aborted. Note, however, that an element that is not visible or onscreen may still be rendered.

~SVG文書の［ ~scroll法／~pan法 ］を~supportする~UAは、［ 現在~SVG表示域の外側にある~focusが，ある要素に移動した ］ときには，~focusされた要素が~SVG表示域の中に入る所まで，文書を［ ~scrollする／~panする ］ベキである。 ◎ When the user agent supports scrolling or panning of the SVG document, and focus moves to an element that is currently outside the SVG viewport, the user agent should scroll or pan the document until the focused element is within the SVG viewport.

~HTMLと同じく，`~focus可能$な~SVG要素のうち`作動化の挙動$は定義されていないものは、 その作動化の挙動は何もしないとする （それに対し特定的に応答する~scriptは無い限り）。 ◎ As in HTML, an SVG element that is focusable but does not have a defined activation behavior has an activation behaviour that does nothing (unless a script specifically responds to it).

これは，［ ~focus可能な要素のうち，`tabindex$a 属性を外すと~focus可能にならないもの ］は、~mouse以外の作動化（例： 要素が`~focus＠#Focus$を得ている間に `enter^kbd ~UIkeyを叩いた） に呼応して `click$et ~eventが発火されることを意味する。 ◎ This means that an element that is only focusable because of its ‘tabindex’ attribute will fire a click event in response to a non-mouse activation (e.g. hitting the "enter" key while the element has focus).

~HTMLと~SVGが~inlineに混在する文書に対しては、 ~focus【の~navi】は，一体としての文書に対し取扱われる （それぞれの逐次的~focus順序を組合せて） — 隔離された下位-文書としての各~inline［ ~SVG／~HTML ］素片ごとではなく。 ◎ For documents that contain a mix of inline HTML and SVG, focus is handled for the document as a whole (with a combined sequential focus order), not with each inline SVG or HTML fragment as an isolated subdocument.

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

~SVG要素には、~HTMLの `accesskey$a 属性に等価なものは無いことに注意。 ◎ Note that SVG elements do not have an equivalent of HTML's accesskey attribute.

15.8. ~event属性

`~event属性@

~event属性の名前は、 常に `on^l から開始され，それに意図される~eventの名前が後続する。 それは、［ 当の属性が指定された要素に，所与の型の~eventが配送されたとき ］に走らす何らかの~scriptを指定する。 ◎ An event attribute always has a name that starts with "on" followed by the name of the event for which it is intended. It specifies some script to run when the event of the given type is dispatched to the element on which the attribute is specified.

~SVGにおいては、 `~UA$が~supportするどの`~event型$も［ `HTML$r による`~event~handler内容~属性$用の要件と同じ要件に従う，~event属性 ］として~supportされる。 `~event属性$は、 すべての`~SVG要素$に可用である。 ◎ For every event type that the user agent supports, SVG supports that as an event attribute, following the same requirements as for event handler content attributes [HTML]. The event attributes are available on all SVG elements.

`~event属性$の内容は、常に — ~MIME型 `application/ecmascript^c を伴って処理されたかのように — ~ECMAScriptとして解釈される。 `rfc2046$r `rfc4329$r ◎ The contents of event attributes are always interpreted as ECMAScript, as if processed with the media type 'application/ecmascript'. [rfc2046][rfc4329]

`~event属性$は、 `~animate可能＠~SVGanim#Animatable$でない。 ◎ Event attributes are not animatable.

実装者からは、 `~event属性$の設定は `EventTarget$I 上の `EventListener$I の作成と登録としても見れる。 そのような~event~listenerは、 `浮上~相$と`~target相$に限り，呼出される — `addEventListener()^n の %useCapture 引数に ~F が指定されたかのように。 この `EventListener$I は、 `EventTarget$I 上に登録された他のもの同じ方式で挙動する。 ◎ Implementors may view the setting of event attributes as the creation and registration of an EventListener on the EventTarget. Such event listeners are invoked only for the "bubbling" and "at target" phases, as if false were specified for the useCapture argument to addEventListener. This EventListener behaves in the same manner as any other which may be registered on the EventTarget.

~event~listenerを表現している`~event属性$の変化は、 以前に登録した `EventListener$I の除去と新たなものの登録としても見れる。 さらに、 `EventTarget$I 上の他の `EventListener$I に関して，`~event属性$が~eventを受取る順序は何も指定されない【？】。 ◎ If the attribute representing the event listener is changed, this may be viewed as the removal of the previously registered EventListener and the registration of a new one. Futhermore, no specification is made as to the order in which event attributes will receive the event with regards to the other EventListeners on the EventTarget.

function myAction1(%evt) {
  /* 
~eventを処理する~code
◎
process the event
 */
}
  /* 
後から
◎
... later ...
 */
myElement.addEventListener("click", %myAction1, %false)

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

15.9. `script^e 要素

`script$e 要素は、 ~HTMLにおける `script$eH 要素と等価であり，~script（例：~ECMAScript）用の~~場所を与える。 どの `script$e 要素の中で定義されたどの関数も、 現在の文書~全体にわたる “大域的な” 視野を備える。 ◎ A ‘script’ element is equivalent to the ‘script’ element in HTML and thus is the place for scripts (e.g., ECMAScript). Any functions defined within any ‘script’ element have a "global" scope across the entire current document.

~scriptの~text内容が直に描画されることは決してない。 `script$e 要素~用の `display$p 値は、 `~UA~stylesheet$により，常に `none^v に設定されるモノトスル — この宣言の重要度は，他のどの［ ~CSS規則／呈示~属性 ］よりも高いモノトスル。 ◎ The script's text content is never directly rendered; the display value for the ‘script’ element must always be set to none by the user agent style sheet, and this declaration must have importance over any other CSS rule or presentation attribute.

~UAは、`script$e 要素を実行しようと試みる前に， `type$a 用の解決された~MIME型~値を検分するモノトスル。 ~scripting言語を~supportしない~SVG`~UA$は、 `script$e 要素を実行しないモノトスル。 ◎ Before attempting to execute the ‘script’ element the resolved media type value for ‘type’ must be inspected. If the SVG user agent does not support the scripting language then the ‘script’ element must not be executed.

  <?xml version="1.0" standalone="no"?>
  <svg width="6cm" height="5cm" viewBox="0 0 600 500"
       xmlns="http://www.w3.org/2000/svg">
	<desc>
例 `script01^xl
— `onclick^a ~eventから~ECMAScript関数を呼出す
◎
Example script01 - invoke an ECMAScript function from an onclick event

    </desc>
	<!-- 
各~clickに対し，半径を変化させる~ECMAScript
◎
ECMAScript to change the radius with each click
 -->
    <script type="application/ecmascript"> <![CDATA[
      function circle_click(%evt) {
        var %circle = %evt.target;
        var %currentRadius = %circle.getAttribute("r");
        if (%currentRadius == 100)
          %circle.setAttribute("r", %currentRadius*2);
        else
          %circle.setAttribute("r", %currentRadius*0.5);
      }
    ]]> </script>

	<!-- 
描く区画の外形線を成す青線
◎
Outline the drawing area with a blue line
 -->
    <rect x="1" y="1" width="598" height="498" fill="none" stroke="blue"/>

	<!-- 
各 `click^et ~eventに対し，動作する
◎
Act on each click event
 -->
    <circle onclick="circle_click(evt)" cx="300" cy="225" r="100"
            fill="red"/>

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

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

◎属名 `crossorigin@a ◎属値 [ `anonymous^v | `use-credentials^v ]? ◎属初 （~HTMLによるこの属性の定義を見よ） ◎属ア 可 ◎表終 ◎ Name Value Initial value Animatable crossorigin [ anonymous | use-credentials ]? (see HTML definition of attribute) yes

`crossorigin^a 属性は`~CORS設定群~属性$であり、 他が指定されない限り， `HTML$r と同じ処理~規則に従う。 ◎ The crossorigin attribute is a CORS settings attribute, and unless otherwise specified follows the same processing rules as in html [HTML].

◎属名 `type@a ◎属値 （下を見よ） ◎属初 `application/ecmascript^v ◎属ア 不可 ◎表終 ◎ Name Value Initial value Animatable type (see below) application/ecmascript no

所与の `script$e 要素~用の~scripting言語を識別する。 値は、 `rfc2046$r に従って妥当な~MIME型でなければナラナイ。 `type$a は供されていない場合の既定の~scripting言語は、 ~ECMAScriptと見做される — ~MIME型 `application/ecmascript^c の下で処理されたかのように。 ◎ Identifies the scripting language for the given ‘script’ element. The value must be a valid media type, per Multipurpose Internet Mail Extensions (MIME) Part Two [rfc2046]. If a ‘type’ is not provided, then the default scripting language assumed is ECMAScript, as if processed with the ‘application/ecmascript’ media type.

◎属名 `href@a ◎属値 `~URLt$ ◎属初 （ナシ） ◎属ア 不可 ◎表終 ◎ Name Value Initial value Animatable href URL [URL] (none) no

~script~codeを包含している外部~資源への`~URL参照$sec。 ［ `~URL参照~属性$ ／ `非推奨にされた~XLink属性$ ］用に定義される共通な取扱いを~~見よ。 ◎ An URL reference to an external resource containing the script code. Refer to the common handling defined for URL reference attributes and deprecated XLink attributes.

~URLは、 `§ ~link法＠~SVGlinking#processingURL$ に述べるように処理され，資源は~fetchされる。 ◎ The URL is processed and the resource is fetched as described in the Linking chapter.

15.10. ~DOM~interface

[Exposed=Window]
interface `SVGScriptElement^dfn : `SVGElement$I {
  attribute DOMString `type$m;
  attribute DOMString? `crossOrigin$m;
};

`SVGScriptElement$I includes `SVGURIReference$I;