svg-interact-ja.html

<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8">
<title>SVG 2 — Scripting and Interactivity （日本語訳）</title>

<link rel="stylesheet" href="common.css" type="text/css">
<link rel="stylesheet" href="common-svg.css" type="text/css">

<style>

@supports (grid-template-columns: subgrid) and (display: contents) {

#_event-table {
	grid-template-columns: 1fr 1fr 1fr 1fr;
	min-width: 30em;
	max-width: 70em;
	tr {
		grid-template-areas:
			"名 型 類 属性名"
			"説明 説明 説明 説明";
		background: var(--V-bg);

		> *:nth-child(1) {
			grid-area: 名;
		}
		> *:nth-child(2) {
			grid-area: 型;
		}
		> *:nth-child(3) {
			grid-area: 類;
		}
		> *:nth-child(4) {
			grid-area: 属性名;
		}
		> *:nth-child(5) {
			grid-area: 説明;
			background: var(--W-color);
			padding: 0.5em 0.5em 0.5em 2em;
		}
	}
}

}


</style>


<script src="common0.js"></script>
<script src="svg-common.js"></script>
<script src="common1.js" async></script>


<script type="text/plain" id="_source_data">

●●options
spec_title:SVG 2 — Scripting and Interactivity
spec_date:2019-08-31
trans_update:2019-09-01
source_checked:180820
abbr_url:SVGinteract
page_state_key:SVG
original_url:https://svgwg.org/svg2-draft/interact.html
spec_status:ED
copyright:2019,use
site_nav:svg,css
nav_prev:SVGpservers
nav_next:SVGlinking
trans_1st_pub:2018-09-03

●●class_map
m:dom0
n:dom

●●tag_map
kbd:kbd
n:code

●●original_id_map

●●mdn_urls
PointerEventsProperty:SVG/Attribute/pointer-events

elementdef-script:SVG/Element/script

InterfaceSVGScriptElement:API/SVGScriptElement

●●link_map

	●IDL

I.Event:~DOM4#interface-event
I.EventTarget:~DOM4#interface-eventtarget
I.EventListener:~DOM4#callbackdef-eventlistener

	m.crossOrigin:#__svg__SVGScriptElement__crossOrigin
	m.type:#__svg__SVGScriptElement__type

n.initEvent:~DOM4#dom-event-initevent
	~TR/dom/#dom-event-initevent
n.addEventListener:~DOM4#dom-eventtarget-addeventlistener
n.removeEventListener:~DOM4#dom-eventtarget-removeeventlistener

et.load:#LoadEvent
et.unload:#UnloadEvent
et.error:#ErrorEvent
et.beginEvent:#BeginEvent
et.endEvent:#EndEvent
et.repeatEvent:#RepeatEvent

et.hashchange:~HTMLindex#event-hashchange
et.click:~UIEVENTS#event-type-click


	●a
eH.script:~HEscripting#the-script-element

a.type:~SVGinteract#ScriptElementTypeAttribute
a.crossorigin:~SVGinteract#ScriptElementCrossoriginAttribute
a.href:~SVGinteract#ScriptElementHrefAttribute
a.tabindex:~SVGstruct#SVGElementTabindexAttribute
a.end:~SVGanim#EndAttribute
a.begin:~SVGanim#BeginAttribute
a.onbegin:#OnBeginEventAttribute
a.onend:#OnEndEventAttribute
a.onrepeat:#OnRepeatEventAttribute
a.onclick:#EventAttributes

a.focusable:~TR/SVGTiny12/interact.html#focusable-attr
a.accesskey:~HTMLinteraction#the-accesskey-attribute
	~TR/html51/editing.html#the-accesskey-attribute

	●code 他
ps.focus:~SELECTORS4#focus-pseudo
	ps.focus:~TR/css-selectors-3/#the-user-action-pseudo-classes-hover-act

P.event-value:~SVGanim#EventValueSyntax

	●用語／§
sec.~SVG内容から外への~link:~SVGlinking#Links
sec.~URL参照:~SVGlinking#URLReference


	●外部
~event型:~DOM4#dom-event-type
	~event型:~DOM4#ref-for-dom-event-type
浮上-相:~DOM4#dom-event-bubbling_phase
~target相:~DOM4#dom-event-at_target
	廃）浮上~相:~UIEVENTS#bubble-phase
	廃）~target相:~UIEVENTS#bubble-phase
	廃）~event~flow:~UIEVENTS#event-flow

切抜き~path:~MASKING1#clipping-path

動的~疑似類:~SELECTORS4#useraction-pseudos
	~TR/2011/REC-CSS2-20110607/selector.html#pseudo-class-selectors
~focusされて:~HTMLinteraction#focused
~focus可能な区画:~HTMLinteraction#focusable-area
	廃）~tabindex~focus~flag:~HTMLinteraction#specially-focusable
作動化の挙動:~DOM4#eventtarget-activation-behavior

~event~handler内容~属性:~WAPI#event-handler-content-attributes

実際の値:~CASCADE#actual-value

	●他

	http://www.ietf.org/rfc/rfc2046.txt

	https://www.w3.org/Submission/2011/SUBM-SVGTL-20110607/#VisibilityControllingAccordingToZooming
	animate.html
	~DOM4#dispatching-events
	~SVGissue/56
	~SVGanim#Animatable

	a.tabindex:~TR/html51/editing.html#the-tabindex-attribute
	a.tabindex:~HTMLinteraction#the-tabindex-attribute

	~focus~model:~HTMLinteraction#focus

	`smil-animation$r:~SVG11/smil-animation.html
	`smil-animation$r:~TR/2001/REC-smil-animation-20010904/

	~TR/dom/#dom-eventtarget-addeventlistener
	~DOM4#dom-eventtarget-addeventlistener
	~HTMLindex#events-2

	~TR/orientation-event/

	~TR/uievents/#event-flow
	~TR/uievents/#events-uievent-types
	#Focus
	#PointerEvents
	#SVGEvents
	~SVGlinking#processingURL
	~SVGstruct#SVGElementEventHandlerAttributes
	svgdom.html
	svgdom.html#RelationshipWithUIEVENTS
	~SVGtext#TextSelection


●用語（外部

●●words_table1
use-:<code class="element">use</code>-

●●words_table
ECMAScript:
UI-Events:UI Events

	●幾何
周界:perimeter:周
	に重なる:over
	に重なっている:under

	●塗り／色／効果
ベタな:solidな:ベタ塗りの
巡回-:cycle:~
	~~背後:underneath
青線:blue line:~
最上層:topmost:~

	●呈示／UI／CSS
pointing::::ポインタ指示
double-click::::ダブルクリック
drag::::ドラッグ
drop::::ドロップ
trackball::::トラックボール
tooltip::::ツールチップ
touch::::タッチ
操作o:operation::操作
呼起こし:evocation::呼び起こし
呼起こす:evokeする::呼び起こす
感応する:sensitiveな::~
強調:highlight::~

押下げる:pressする::~
押下げた:pressした::~
動き:movement:~
動かす:moveする:~
模倣-:emulate::~
応答可能:responsive::~
叩いた:hitした:~
露わに:reveal:~
	tabindex:
	~UI:user interface
	~focus不能な:un-focusable
	~focus可能:focusable
	非~pointing:non-pointing
	~pointer装置~pointer-device
	右~click等:right-click or command-click
	~text選択:text-selection
	~UI:user-interface
	~mouse以外の:non-mouse
	~scroll法:scrolling
	~scroll可能な:scrollable
	~screen外:not onscreen


	●event
相:phase::~
捕捉-:capture::~
終止-:end::~
始動-:begin::~
	取消~可能:cancelable

	●仕様
現代的:modern:~
排他的:exclusive:~
究明-:investigate:~
模倣-:emulate:~
機能上の:functional:~
肯定的:positive:~
恒常的:normal:~

	-:determinant
	非推奨にされていない:non-deprecated
	廃用にされてない:non-obsolete
	それでも:nonetheless
	見れる:may view
	書く:write
	~~対応する:respective
	揃える:align with
	紛らわしくなる:confusingly
	その結果による:conseqential
	能力がある:capable
	見込みも少ない:unlikely
	により:because of

	~We:
	ものとする:shall
	可能にする:allow
	何もしない:does nothing
	基に:basis
	関心を引く:of interest
	-:compared


	●未分類
開く:openする:~
渡され:passされ:~
渡す:passする:~
	接頭辞なしの:unprefixed

database::::データベース
量:amount:~
立上げる:launchする::立ち上げる
	二値的な:binary-
混在する:mixされた:~

	~script可能な:scriptable
	~scriptによる:scripted
	下位-文書:subdocument
	後続-:follow

	-:focusing
	-:raise
	`hashchange^et: anchor change
	^et:unload
	切抜き:clip
	^e:body
	^en:roll-over
	^c:evt
	^en:hit detection
	~~捕える:intercept
	一体としての:as a whole
	-:possible
	~animate法:animating
	なる:become
	点:point
	ISSUE-2176

	●指示語
	常時:at all times
	列目:column
	直後:immediately after
	初回の:first
	あるいは:or otherwise
	高くされ:over
	~~場所:place
	近く:near
	部位:part
	上に:on top of
	他へ:away
	互いに:mutually
	~across
	それにほぼ近いとき:almost-but-not-fully-transparent
	-:among
	更なる／それ以上の:further
	唯一:the only
	度に:each time
	まで:at most
	-:anywhere

●●images
＠svg-resources/
script01｜height:189px｜｜.png
script01-AfterClick｜height:189px｜｜.png

●●trans_metadata
<p>
~THIS_PAGEは、~W3Cにより編集者草案として公開された
<a href="https://svgwg.org/svg2-draft/Overview.html">SVG 2 仕様</a>
の
<a href="~SPEC_URL">§ Scripting and Interactivity</a>
を日本語に翻訳したものです。
~PUB
</p>


</script>

</head>
<body>

<header>
	<hgroup>
<h1>15. スクリプト処理と対話性 — Scripting and Interactivity</h1>
	</hgroup>
</header>


<main id="MAIN" hidden>

	<section id="Introduction">
<h2 title="Introduction">15.1. 序論</h2>


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

<ul>
	<li>
~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.
</li>
	<li>
~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.
</li>
</ul>

<p>
この章は、対話的な~SVGにおける~scriptingと~DOM~eventの取扱いについて述べる
— `~event＠#SVGEvents$は，どの状況下で誘発されるかも含め。
◎
This chapter describes scripting and DOM event handling in interactive SVG, including under which circumstances events are triggered.
</p>

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

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

	</section>
	<section id="SVGEvents">
<h2 title="Supported events">15.2. ~supportされる~event</h2>

<div class="annotation svg2-requirement">

<p>
~SVG-2要件：
`hashchange$et ~eventを~supportする。
◎
SVG 2 Requirement: Support anchor change events.
</p>

<ul>
	<li>
解決：
~SVG-2は、
~HTML文書 `wide^en な【？】~event（ `hashchange$et を含む）を，
~SVG文書に適用するものとして追加することを考慮する
— それらがイミを成す所で（`~~参照先＠https://www.w3.org/2011/12/22-svg-irc#T21-23-17$）。
◎
Resolution: SVG 2 will consider adding HTML document wide events (including hashchange) apply to SVG documents where they make sense.
</li>
	<li>
目的：
~HTMLの［
`body^e 要素／根~要素
］上で利用できるものと同じ~event~listener属性の集合を，根~SVG要素にも利用することを，作者に許容する。
◎
Purpose: To allow authors to use the same set of event listener attributes on a root SVG element that they can on an HTML body or root element.
</li>
	<li>
Owner:
Cameron (`3278$ACTION)
</li>
</ul>

</div>

<div class="annotation svg2-requirement">

<p>
~SVG-2要件：
適切な~interface上で，~event~listener属性を備える。
◎
SVG 2 Requirement: Have event listener attributes on an appropriate interface.
</p>

<ul>
	<li>
解決：
~SVG-2は、
すべての~event~listener属性を `Element^I に移動する
— ~HTMLにおける同様の移動-に則って
（`~~参照先＠https://www.w3.org/2011/07/27-svg-minutes.html#item03$）。
◎
Resolution: SVG 2 will move all events listener attributes to Element, in accordance with the similar move in HTML.
</li>
	<li>
目的：
~HTMLに揃える。
◎
Purpose: To align with HTML.
</li>
	<li>
Owner:
Cameron (`3283$ACTION)
</li>
</ul>

</div>

<div class="annotation svg2-requirement">

<p>
~SVG-2要件：
~event~handlerにおける `event^c 【引数】の別名として、
`evt^c を導入する。
◎
SVG 2 Requirement: Introduce evt as an alias to event in event handlers.
</p>

<ul>
	<li>
解決：
~event~handlerにおける~eventの別名として `evt^c を導入することにより，
ISSUE-2176 を解決するものと裁定された
（`~~参照先＠https://www.w3.org/2011/07/27-svg-minutes.html#item15$）。
◎
Resolution: We decide to resolve ISSUE-2176 by introducing evt as an alias to event in event handlers.
</li>
	<li>
目的：
~HTMLに揃える。
◎
Purpose: To align with HTML.
</li>
	<li>
Owner:
Cameron (`3093$ACTION)
</li>
</ul>

</div>

<div class="annotation svg2-requirement">

<p>
~SVG-2要件：
~drag＆~dropの機能性を~supportする。
◎
SVG 2 Requirement: Support drag &amp; drop functionality.
</p>

<ul>
	<li>
解決：
~SVG-2には~drag＆~drop 機能性が要求され得る
— ~HTMLによるその機能性を究明する
（`~~参照先＠https://www.w3.org/2011/12/22-svg-irc#T21-31-24$）。
◎
Resolution: SVG 2 may require drag &amp; drop functionality, and we'll investigate HTML5's functionality for that.
</li>
	<li>
目的：
~SVGにおいてもより容易な~drag＆~dropを許容して、~HTMLに揃える。
◎
Purpose: To allow easier drag &amp; drop in SVG, and to align with HTML.
</li>
	<li>
Owner:
Erik (`3328$ACTION)
</li>
</ul>

</div>

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

<ul>
	<li>
~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
</li>
	<li>
~SVGの`~animation要素$は、
~eventに基づいて［
始動する／終止する
］よう定義できる。
◎
SVG's animation elements can be defined to begin or end based on events.
</li>
</ul>


<p class="note">
~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.
</p>


<p class="issue" id="issue8">
もっと現代的な~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.
</p>

<p>
以下の表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.
</p>

<p>
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).
</p>

<p>
表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.
</p>

<p>
表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.
</p>

<table id="_event-table" class="grid-table"><thead>
<tr><th>~event名
<th>~UI~event名
<th>~event分類
<th>~event属性~名
<th>~~説明
<tbody>

<tr><td>`load@et
<td>（左に同じ）
<td>なし
<td>`onload^a
<td>

<p>
`load^et ~eventは、［
`構造的に外部の要素$ ／ `Window$I
］に向けてのみ，対応する外部~資源が読込ngを完遂したときに配送される。
`Window$I との
`関係性＠~SVGstruct#SVGElementEventHandlerAttributes$に因り、
`svg$e 要素~上の `load^et ~eventは，
文書~内のすべての資源が完全に読込まれたときに限り配送されることに注意。
◎
The load event is dispatched only to structurally external elements and to the Window, when the corresponding external resources have finished loading. Note that due to it's relationship with Window the load event on ‘svg’ elements is only dispatched when all resources in the document have been completely loaded.
</p>

<p>
`構造的に外部の要素$上の［
`load^et ~event, `error^et ~event
］は、互いに排他的であり，当の要素を処理するときは 片方のみを配送するモノトスル。
◎
The load event and the error event on structurally external elements are mutually exclusive, only one of these events must be dispatched when processing the element in question.
</p>

<p>
`load^et ~eventは、
浮上しない, かつ取消~可能でない。
◎
load events do not bubble and are not cancelable.
</p>

<p class="note">
以前の~SVG仕様では、
`load^et ~eventは `SVGLoad^et と呼ばれ，要素を構文解析した直後に
— 関係する資源（たち）が全部的に読込まれる前に —
配送され得ていた。
◎
In previous SVG specifications the load event was called SVGLoad and could be dispatched immediately after parsing an element but before the related resource(s) were fully loaded.
</p>

<tr><td>`unload@et
<td>（左に同じ）
<td>なし
<td>`onunload^a

<td>
<p>
`最外縁の~svg要素$に限り，適用-可能とする。
`unload^et ~eventは、
~DOM実装が~windowや~frameから文書を除去するときに生じる。
◎
Only applicable to outermost svg elements. The unload event occurs when the DOM implementation removes a document from a window or frame.
</p>

<p>
`unload^et ~eventは、
浮上しない, かつ取消~可能でない。
◎
unload events do not bubble and are not cancelable.
</p>

<tr><td>`error@et
<td>（左に同じ）
<td>なし
<td>`onerror^a
<td>

<p>
`error^et ~eventは、［
`構造的に外部の要素$が適正に読込まれなかった ／
~script実行の間に~errorが生じた
］とき，生じる。
◎
The error event occurs when a structurally external element does not load properly or when an error occurs during script execution.
</p>

<p>
`error^et ~eventは、
浮上するが，取消~可能でない。
◎
error events bubble but are not cancelable.
</p>

<tr><td>`beginEvent@et
<td>なし
<td>なし
<td>`onbegin^a
<td>
~animation要素が始動するとき，生じる。
詳細は、 `smil-animation$r の `TimeEvent^I ~interfaceの記述を見よ。
◎
Occurs when an animation element begins. For details, see the description of Interface TimeEvent in the SMIL Animation specification.

<tr><td>`endEvent@et
<td>なし
<td>なし
<td>`onend^a
<td>
~animation要素が終止したとき，生じる。
詳細は、 `smil-animation$r の `TimeEvent^I ~interfaceの記述を見よ。
◎
Occurs when an animation element ends. For details, see the description of Interface TimeEvent in the SMIL Animation specification.

<tr><td>`repeatEvent@et
<td>なし
<td>なし
<td>`onrepeat^a
<td>
~animation要素が、
初回の反復~後，繰返される度に生じる。
詳細は、 `smil-animation$r の `TimeEvent^I ~interfaceの記述を見よ。
◎
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.
</table>

<p>
~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.
</p>

<p>
同様に，`~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.
</p>

		<section id="RelationshipWithUIEVENTS">
<h3 title="Relationship with UI Events">15.2.1. UI Events との関係性</h3>

<p>
~SVG~DOMは、
`uievents$r に定義されるすべての~interface, および［
`uievents$r ／ `clipboard-apis$r
］に定義される すべての~event型と互換である。
◎
The SVG DOM is compatible with all interfaces defined in, and all the event types from, UI Events, and the event types defined in Clipboard API and events ([uievents], [clipboard-apis]).
</p>

<p>
~SVG名前空間に属するすべての要素は、
これらの~event用の`~event属性$を~supportする。
合致している~IDL~propは、
基底 `SVGElement$I ~interface上の［
`GlobalEventHandlers$I ／ `DocumentAndElementEventHandlers$I
］~mixinを介して含まれる。
◎
All elements in the SVG namespace support event attributes for these events; matching IDL properties are included in the base SVGElement interface via the GlobalEventHandlers and DocumentAndElementEventHandlers mixins, respectively.
</p>

<p>
適合~SVG~softwareは、
~SVG~DOM~supportの一部として，これらの仕様にて定義される すべての~event型を~supportするモノトスル
（非推奨に／廃用にされたものは別として）
— 関連な~eventが~softwareの利用にて生じ得るならば。
それでも、
`利用者-ヤリトリ＠~SVGconform#processing-modes$を~supportしない~SVG~softwareは，
利用者-ヤリトリを伴わずに発火し得る~event用の~supportを実装するベキである
— `load^et, `error^et ~eventなど。
◎
As part of SVG DOM support, conforming SVG software must support all (non-deprecated, non-obsolete) event types defined in these specifications, if the relevant events could occur in the software's use. SVG software that does not support user interaction should nonetheless implement support for events that can fire without interaction, such as load and error events.
</p>

<p>
~SVG~animation要素 `svg-animation$r に定義される追加的な［
~event, `~event属性$
］を~supportする。
次に挙げる~event型は、
~animationにおける状態~変化に因り誘発される
⇒
`beginEvent$et,
`endEvent$et,
`repeatEvent$et
◎
SVG animation elements (defined in the SVG Animations Level 2 specification) support additional events and event attributes. The following event types are triggered due to state changes in animations.
• beginEvent
• endEvent
• repeatEvent
</p>

<p>
これらの~animation~event用の`~event属性$には、
他の要素に対する効果は無い。
◎
The event attributes for these animation events have no effect on other elements.
</p>

		</section>
	</section>
	<section id="UIEvents">
<h2 title="User interface events">15.3. ~UI~event</h2>

<p>
対話性を~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.
</p>

<p>
作者は、~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.
</p>

	</section>
	<section id="PointerEvents">
<h2 title="Pointer events">15.4. ~pointer~event</h2>

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

<p>
多くの~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.
</p>

<p>
~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.
</p>

<p>
~pointer~event用の~target要素が存在する場合、
通常の~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]
</p>

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

	</section>
	<section id="pointer-processing">
<h2 title="Hit-testing and processing order for user interface events">15.5. ~UI~event用の接触判定と処理~順序</h2>


<p>
`接触判定@
（ `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.
</p>

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

<ol>
	<li>
ある~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;
</li>
	<li>
関連な要素に結付けられた動作の，機能上の処理。
◎
functional processing of actions associated with any relevant element.
</li>
</ol>

		<section id="hit-testing">
<h3 title="Hit-testing">15.5.1. 接触判定</h3>

<p>
~pointer~eventに対する`接触判定$の結果が肯定的になるかどうかは、［
当の~pointerの位置,
`~graphics要素$の~sizeと図形,
要素~上の `pointer-events$p ~propの算出d値
］に依存して決定される。
以下の `pointer-events$p ~propの定義が、
所与の型~graphics要素に対し，~pointer~eventに感応する正確な領域を述べる。
◎
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.
</p>

<p>
`svg$e 要素は、`~graphics要素$ではないことに注意。
`適合~SVG自立的~file$においては、
`最外縁の~svg要素$は，~pointer~eventの~targetには決してならない
— ~eventは その要素まで浮上し得るが。
ある`~graphics要素$における~pointer~eventの`接触判定$の結果が肯定的でない場合、
~UAに特有な~windowの挙動があれば，それを呼起こすベキである
— 文脈~menuを呈示するなど。
◎
Note that the ‘svg’ element is not a graphics element, and in a Conforming SVG Stand-Alone File a outermost 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.
</p>

<p>
この仕様は、
参照や内包により別の文書の中に埋込まれた~SVG画像~用には，`最外縁の~svg要素$上の~pointer~eventの挙動は定義しない
— 例：~HTML文書~内に埋込まれた`最外縁の~svg要素$は，~mouse~click~eventを~~捕えるかどうかなど。
将来の仕様は，この挙動を定義し得るが、
この仕様の目的においては，挙動は実装に特有とする。
◎
This specification does not define the behavior of pointer events on the outermost svg element for SVG images which are embedded by reference or inclusion within another document, e.g., whether the outermost 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.
</p>

		</section>
		<section id="event-processing">
<h3 title="Event processing">15.5.2. ~event処理</h3>

<p>
~UI~eventの~targetにされている要素は、
特定0の対話の挙動を備え得る
— 要素の型, および、次に挙げるものなど，明示的な対話が結付けられたかどうかに依存して
⇒＃
~scriptによる~event~listener ／
~CSS疑似類との合致- ／
時機が~eventに基づくような宣言的~animation
◎
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.＼
</p>

<p>
所与の~target要素~用に
— ~DOM~eventを配送した後に —
~UI~eventを処理するための~algoと順序は、次に従う：
◎
The algorithm and order for processing user interface events for a given target element, after dispatching the DOM event, is as follows:
</p>

<ol>
	<li>
要素~上に登録された~event~handlerが `preventDefault()^m ~methodを呼出した場合
⇒
この要素~用には更なる処理は遂行せずに，
`~event配送-と~DOM~event~flowの処理に従って
~eventを処理する。
`uievents$r
◎
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 dispatch and DOM event flow processing ([uievents]);
</li>
	<li>
要素には ある［
~title／記述
］が結付けられていて（ `title$e 要素など），~UAはそのような情報の表示を~supportする場合（例：~tooltipや状態s~bar~messageを介して）
⇒
その情報を，~pointer~eventの型に応じて適切に表示するベキである。
◎
If the element has an associated title or description, such as a ‘title’ element, 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;
</li>
	<li>
要素は、~pointer~eventの型に適切な関連な`動的~疑似類$
— ［
`hover^ps ／ `active^ps ／ `focus^ps
］など `CSS2$r § 5.11 に合致する場合
⇒
関連な~class~prop【~style？】を適用する。
◎
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;
</li>
	<li>
要素と~event型には［
時機~指定子 `event-value$P を利用して，宣言的な~animationの作動化や取消nが結付けられた
］場合
⇒
対応する~instance時刻を解決した上で，その結果による動作（~animationを即時に開始する／停止するなど）を遂行するモノトスル。
◎
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;
</li>
	<li>
要素は次を満たす場合、
この要素~用には更なる処理は遂行しない
⇒
［
要素は~hyperlinkである（例： `a$e 要素の子孫~要素である）
］~AND［
~pointer~eventの型は その~hyperlinkを作動化するものである（例：~mouse~clickを介する）
］~AND［
~hyperlinkの辿りは内容の文脈を変更する（例：異なる文書を開く／同じ文書の別の部位へ移動して~pointerをこの要素から他へ移動する）
］
◎
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;
</li>
	<li>
要素は`~text内容~要素$であって，~event型は~text選択~操作oの一部を成すものと~UAが認識するものである場合（例：~mouseを~clickして~dragする／~double-clickなど）
⇒
`~text選択＠~SVGtext#TextSelection$~algoを遂行する
◎
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;
</li>
	<li>
~UAが，当の~event型に，特別な~UI~controlの呼起こしを結付けている場合（例：文脈~menuを呼起こすような，右~click等）
⇒
~UAは、そのような自身に特有な挙動を呼起こすベキである
— 文脈~menuを呈示するなど。
◎
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.
</li>
</ol>

		</section>
	</section>
	<section id="PointerEventsProp">
<h2 title="The ‘pointer-events’ property">15.6. `pointer-events^p ~prop</h2>

<p>
作者は、どの状況下にあるかに応じて［
特定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.
</p>


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

<ul>
	<li>
`切抜き~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.＼
</li>
	<li>
<p>
対照的に，~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.
</p>
<p class="trans-note">【†
~alpha~maskの場合の~mask画像の不透明度を指している。
不透明度 0 は、
`~mask値＠~MASKING1#MaskValues$が 0 ，
したがって完全に~maskされて見えなくなる所。
】</p>
	</li>
</ul>

<p>
`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.
</p>

<p>
例えば、［
`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.
</p>

<p>
`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:
</p>

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


◎名 `pointer-events@p
◎値
`auto^v
| `bounding-box^v
| `visiblePainted^v
| `visibleFill^v
| `visibleStroke^v
| `visible^v
| `painted^v
| `fill^v
| `stroke^v
| `all^v
| `none^v
◎初 `auto^v
◎適 `容器~要素$, `~graphics要素$, `use$e 要素
◎継 される
◎百 受容しない
◎算 指定されたとおり
◎ア 離散的
◎表終

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

<dl class="switch">
	<dt>`auto^v</dt>
	<dd>
既定の挙動。
`visiblePainted^v のときと同じに挙動する。
◎
The default behavior, which is the same as for visiblePainted.
</dd>

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

	<dt>`visiblePainted^v</dt>
	<dd>
<p>
［
要素の `visibility$p ~propの値は `visible^v
］~AND［
~OR↓
（ ~pointerは要素が “塗られる区画” に重なる）
］：
</p>
		<ul>
			<li>
［
~pointerは要素の内域（すなわち~fill）に重なる
］~AND［
要素の `fill$p ~propの実際の値†は `none^v 以外
］
</li>
			<li>
［
~pointerは要素の周界（すなわち~stroke）に重なる
］~AND［
要素の `stroke$p ~propの値は `none^v 以外
］</li>
		</ul>
◎
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.
</dd>
	<dd class="trans-note">【†
`実際の値$：
`fill^p ~prop値が~URL参照で，その~URLから妥当な資源を取得できなかった場合も織り込むための記述（
`~~参照先＠https://www.w3.org/2003/01/REC-SVG11-20030114-errata#pointer-events-fallback-values$
）。
下の `painted^v 値では， `stroke^p ~propにも “実際の値” を利用しているが、
なぜ，ここと異なるのかは不明。
】</dd>

	<dt>`visibleFill^v</dt>
	<dd>
［
要素の `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.＼
</dd>
	<dd>
（ `fill$p ~propの値は、~event処理には影響しない。）
◎
The value of the fill property does not affect event processing.
</dd>

	<dt>`visibleStroke^v</dt>
	<dd>
［
要素の `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.＼
</dd>
	<dd>
（ `stroke$p ~propの値は、~event処理には影響しない。）
◎
The value of the stroke property does not affect event processing.
</dd>

	<dt>`visible^v</dt>
	<dd>
［
要素の `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.＼
</dd>
	<dd>
（ `fill$p, `stroke$p ~propの値は、~event処理には影響しない。）
◎
The values of the fill and stroke do not affect event processing.
</dd>

	<dt>`painted^v</dt>
	<dd>
<p>
~OR↓ が満たされる（ ~pointer要素が “塗られる区画” に重なる）：
</p>
		<ul>
			<li>
［
~pointerは要素の内域（すなわち~fill）に重なる
］~AND［
要素の `fill$p ~propの実際の値は `none^v でない
］
</li>
			<li>
［
~pointerは要素の周界（すなわち~stroke）に重なる
］~AND［
要素の `stroke$p ~propの実際の値は `none^v でない
］
</li>
		</ul>
◎
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.＼
</dd>
	<dd>
（ `visibility$p ~propの値は、~event処理には影響しない。）
◎
The value of the visibility property does not affect event processing.
</dd>

	<dt>`fill^v</dt>
	<dd>
~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.＼
</dd>
	<dd>
（ `fill$p, `visibility$p ~propの値は、~event処理には影響しない。）
◎
The values of the fill and visibility properties do not affect event processing.
</dd>

	<dt>`stroke^v</dt>
	<dd>
~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.＼
</dd>
	<dd>
（ `stroke$p, `visibility$p ~propの値は、~event処理には影響しない。）
◎
The values of the stroke and visibility properties do not affect event processing.
</dd>

	<dt>`all^v</dt>
	<dd>
~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.＼
</dd>
	<dd>
（ `fill$p, `stroke$p, `visibility$p ~propの値は、~event処理には影響しない。）
◎
The values of the fill, stroke and visibility properties do not affect event processing.
</dd>

	<dt>`none^v</dt>
	<dd>
決して満たされない条件
（所与の要素は、~pointer~eventを受取らない。）
◎
The given element does not receive pointer events.
</dd>
</dl>

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

<dl class="switch">
	<dt>`visiblePainted^v</dt>
	<dd>
［
要素の `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.
</dd>

	<dt>`visibleFill^v</dt>
	<dt>`visibleStroke^v</dt>
	<dt>`visible^v</dt>
	<dd>
要素の `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.＼
</dd>
	<dd>
（ `fill$p, `stroke$p ~propの値は、~event処理には影響しない。）
◎
The values of the fill and stroke properties do not affect event processing.
</dd>

	<dt>`painted^v</dt>
	<dd>
［
要素の `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.＼
</dd>
	<dd>
（ `visibility$p ~propの値は、~event処理には影響しない。）
◎
The value of the visibility property does not affect event processing.
</dd>

	<dt>`fill^v</dt>
	<dt>`stroke^v</dt>
	<dt>`all^v</dt>
	<dd>
無条件
◎
The values fill, stroke and all are equivalent and indicate that the text string can receive events anywhere within the character cell.＼
</dd>
	<dd>
（ `fill$p, `stroke$p, `visibility$p ~propの値は、~event処理には影響しない。）
◎
The values of the fill, stroke and visibility properties do not affect event processing.
</dd>

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

<p>
~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):
◎
↓</p>

<dl class="switch">
	<dt>`visiblePainted^v</dt>
	<dt>`visibleFill^v</dt>
	<dt>`visibleStroke^v</dt>
	<dt>`visible^v</dt>
	<dd>
要素の `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.
</dd>

	<dt>`painted^v</dt>
	<dt>`fill^v</dt>
	<dt>`stroke^v</dt>
	<dt>`all^v</dt>
	<dd>
無条件
◎
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.＼
</dd>
	<dd>
（ `visibility$p ~propの値は、~event処理には影響しない。）
◎
The value of the visibility property does not affect event processing.
</dd>

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

<p>
`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.
</p>

<p>
次に挙げる~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.
</p>


	</section>
	<section id="Focus">
<h2 title="Focus">15.7. ~focus</h2>

<p>
~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.
</p>

<p>
要素は、~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.
</p>

<p>
次に挙げる~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:
</p>

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

<p>
~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.
</p>

<p>
加えて、
すべての `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.
</p>

<p>
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.
</p>

<p>
~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.
</p>

<p>
連列的~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.
</p>

<p class="note">
`描画されない要素$は、
— `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.
</p>

<p>
~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.
</p>

<p>
~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).
</p>

<p class="note">
これは，［
~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).
</p>

<p>
~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.
</p>

<div class="note">

<p>
例えば，次の文書で `Tab^kbd ~UIkeyを押下げた場合、
要素 `A^l, `B^l, `C^l の順に~focusを巡回することになる。
◎
For example, in the following document, pressing Tab would cycle the focus between elements A, B and C, in that order.
</p>

  
<pre class="lang-html">
&lt;!DOCTYPE html&gt;
&lt;button id="A" tabindex="1"&gt;First thing&lt;/button&gt;
&lt;button id="C" tabindex="2"&gt;Third thing&lt;/button&gt;
&lt;svg width="200" height="200"&gt;
  &lt;text id="B" tabindex="1" x="100" y="100"&gt;Second thing&lt;/text&gt;
&lt;/svg&gt;
</pre>
</div>

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


	</section>
	<section id="EventAttributes">
<h2 title="Event attributes">15.8. ~event属性</h2>

	<dl class="definitions">
	<dt>`~event属性@</dt>
	<dd>
~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.
</dd>
</dl>

<p>
~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.
</p>

<p>
`~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]
</p>

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

<p>
実装者からは、
`~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.
</p>

<p>
~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.
</p>

<div class="example">

<p>
~ECMAScriptにおいて~event~listenerを確立するには、
関数を定義して，その関数を `addEventListener()$n ~methodに渡す仕方がある：
◎
In ECMAScript, one way to establish an event listener is to define a function and pass that function to the addEventListener method:
</p>

<pre class="lang-js">
function myAction1(%evt) {
  /* <span class="comment">
~eventを処理する~code
◎
process the event
</span> */
}
  /* <span class="comment">
後から
◎
... later ...
</span> */
myElement.addEventListener("click", %myAction1, %false)
</pre>


<p>
`~event属性$の値を成す文字~data内容は、
~ECMAScriptにおいては~ECMAScript関数の定義になり，~eventに呼応して呼出される。
登録-済みな他の~ECMAScript~event~listener関数と同じく，この関数は~parameterとして `Event$I ~objを受取る
— その~objの名前は `evt^c である【 `event^c ？】。
例えば、次のように書くこともアリである：
◎
In ECMAScript, the character data content of an event attribute becomes the definition of the ECMAScript function which gets invoked in response to the event. As with all registered ECMAScript event listener functions, this function receives an Event object as a parameter, and the name of the Event object is evt. For example, it is possible to write:
</p>

<pre class="lang-html">
&lt;rect onclick="MyClickHandler(evt)" .../&gt;
</pre>

<p>
関数 `MyClickHandler()^c には %evt として `Event$I ~objが渡される。
◎
which will pass the Event object evt into function MyClickHandler.
</p>

</div>

		<section id="AnimationEvents">
<h3 title="Animation event attributes">15.8.1. ~animation~event属性</h3>

<p>
`~animation~event属性$用の定義を，以下に与える。
これらは、`~animation要素$上に指定できる。
◎
Below are the definitions for the animation event attributes. These can be specified on the animation elements.
</p>

~attrdef

<dl class="attrdef-list">
	<dt>
◎属名 `onbegin@a, `onend@a, `onrepeat@a
◎属値 （下を見よ）
◎属初 （ナシ）
◎属ア 不可
◎表終
◎
Name 	Value 	Initial value 	Animatable
onbegin, onend, onrepeat 	(see below) 	(none) 	no
</dt>
	<dd>
対応する~eventが発火されたとき，その［
`浮上-相$ ／ `~target相$
］において［
属性が指定された要素~上の~listener【！＊】
］として実行する，何らかの~scriptを指定する。
これらの各種`~event属性$が どの~eventに対応するかは、
`~supportされる~event表t＠#SVGEvents$を見よ。
この属性の値に制約は無い。
◎
Specifies some script to execute when "bubbling" or "at target" phase listeners for the corresponding event are fired on the element the attribute is specified on. See supported events table to determine which event each of these event attributes corresponds to. There are no restrictions on the values of this attribute.
</dd>
</dl>

		</section>
	</section>
	<section id="ScriptElement">
<h2 title="The ‘script’ element">15.9. `script^e 要素</h2>

<div class="annotation svg2-requirement">

<p>
~SVG-2要件：
`script$e 上にも~HTMLの［
`async^a ／ `defer^a
］を許容することを考慮する。
◎
SVG 2 Requirement: Consider allowing async/defer on ‘script’.
</p>

<ul>
	<li>
解決：
~SVG-2は、 `script^e 上に `async^a ／ `defer^a を許容する
（`~~参照先＠https://www.w3.org/2012/01/05-svg-irc#T21-07-03$）。
◎
Resolution: SVG 2 will allow async/defer on ‘script’.
</li>
	<li>
目的：
~HTMLに揃える。
◎
Purpose: To align with HTML.
</li>
	<li>
Owner:
Cameron (`3280$ACTION)
</li>
</ul>


<p>
~SVG-2要件： ~SVG Tiny 1.2 の~script処理~modelを組入れる。
◎
SVG 2 Requirement: Incorporate SVG Tiny 1.2 script processing model.
</p>

<ul>
	<li>
解決：
~SVG-2は、
~script可能な~inline内容を，~HTMLと互換な仕方で処理する方法を定義する
（`~~参照先＠https://www.w3.org/2012/03/08-svg-irc#T21-09-09$）。
◎
Resolution: SVG 2 will define how inline scriptable content will be processed, in a compatible way to HTML5
</li>
	<li>
目的：
~HTMLと~SVGで走っている~scriptの挙動を一貫させる。
◎
Purpose: To have consistent script running behavior across HTML and SVG.
</li>
	<li>
Owner: Cameron (`3282$ACTION)
</li>
</ul>
</div>

<p>
`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.
</p>


<p>
~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.
</p>

<p id="ScriptElementExecution">
~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.
</p>

<div class="example">

<p id="ExampleScript01">
この例は、ある関数 `circle_click^c を定義する。
それは `circle$e 要素~上の `onclick$a ~event属性により~callされる。
下の左の絵図に初期~画像, 下の右の絵図に真円を~clickした後の結果を示す。
◎
This example defines a function circle_click which is called by the ‘onclick’ event attribute on the ‘circle’ element. The drawing below on the left is the initial image. The drawing below on the right shows the result after clicking on the circle.
</p>

<pre class="lang-xml">
  &lt;?xml version="1.0" standalone="no"?&gt;
  &lt;svg width="6cm" height="5cm" viewBox="0 0 600 500"
       xmlns="http://www.w3.org/2000/svg"&gt;
	&lt;desc&gt;<span class="comment">
例 `script01^xl
— `onclick^a ~eventから~ECMAScript関数を呼出す
◎
Example script01 - invoke an ECMAScript function from an onclick event
</span>
    &lt;/desc&gt;
	&lt;!-- <span class="comment">
各~clickに対し，半径を変化させる~ECMAScript
◎
ECMAScript to change the radius with each click
</span> --&gt;
    &lt;script type="application/ecmascript"&gt; &lt;![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);
      }
    ]]&gt; &lt;/script&gt;

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

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

    &lt;text x="300" y="480"
          font-family="Verdana" font-size="35" text-anchor="middle"&gt;

      Click on circle to change its size
    &lt;/text&gt;
  &lt;/svg&gt;
</pre>

<figure><figcaption>
~SVG図形~上の `onclick$a ~event~handlerの効果をデモる例。
◎
An example demonstrating the effect of the ‘onclick’ event handler on an SVG shape.
</figcaption>
<p class="alt" hidden id="_dgm-script01">
`click^et ~eventから~JS関数を呼出す方法をデモる例
— 最初に~clickされる前
◎
An example demonstrating how to invoke an ECMAScript function from an onclick event — before first click
</p>
<p class="alt" hidden id="_dgm-script01-AfterClick">
`click^et ~eventから~JS関数を呼出す方法をデモる例
— ~clickされた後
◎
An example demonstrating how to invoke an ECMAScript function from an onclick event — after first click
</p>
</figure>

`script/script01.svg^viewAs

</div>


◎要素名 `script@e
◎分類 `決して描画されない要素$／`構造的に外部の要素$
◎内容 文字~data
◎属性
`中核~属性$,
`大域~event属性$,
`文書~要素~event属性$,
`非推奨にされた~XLink属性$,
`type$a,
`href$a,
`crossorigin$a
◎界面 `SVGScriptElement$I
◎表終

~attrdef

<dl class="attrdef-list">
	<dt>
◎属名 `crossorigin@a
◎属値 <span class="prod">[ `anonymous^v | `use-credentials^v ]?</span>
◎属初 （~HTMLによるこの属性の定義を見よ）
◎属ア 可
◎表終
◎
Name 	Value 	Initial value 	Animatable
crossorigin 	[ anonymous | use-credentials ]? 	(see HTML definition of attribute) 	yes
</dt>
	<dd>
`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].
</dd>

	<dt>
◎属名 `type@a
◎属値 （下を見よ）
◎属初 `application/ecmascript^v
◎属ア 不可
◎表終
◎
Name 	Value 	Initial value 	Animatable
type 	(see below) 	application/ecmascript 	no
</dt>
	<dd>
所与の `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.
</dd>

	<dt>
◎属名 `href@a
◎属値 `~URLt$
◎属初 （ナシ）
◎属ア 不可
◎表終
◎
Name 	Value 	Initial value 	Animatable
href 	URL [URL] 	(none) 	no
</dt>
	<dd>
~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.
</dd>
	<dd>
~URLは、
`§ ~link法＠~SVGlinking#processingURL$
に述べるように処理され，資源は~fetchされる。
◎
The URL is processed and the resource is fetched as described in the Linking chapter.
</dd>
</dl>

	</section>
	<section id="DOMInterfaces">
<h2 title="DOM interfaces">15.10. ~DOM~interface</h2>

		<section id="InterfaceSVGScriptElement">
<h3 title="Interface SVGScriptElement">15.10.1. ~interface `SVGScriptElement^I0</h3>

<p>
`SVGScriptElement$I ~objは、
~DOMにおいて `script$e 要素を表現する。
◎
An SVGScriptElement object represents a ‘script’ element in the DOM.
</p>

<pre class="idl">
[Exposed=Window]
interface `SVGScriptElement^dfn : `SVGElement$I {
  attribute DOMString `type$m;
  attribute DOMString? `crossOrigin$m;
};

`SVGScriptElement$I includes `SVGURIReference$I;
</pre>

<dl class="idl-def">
	<dt>`type@m</dt>
	<dd>
`type$a 内容~属性を`反映する$。
◎
The type IDL attribute reflects the ‘type’ content attribute.
</dd>

	<dt>`crossOrigin@m</dt>
	<dd>
`crossorigin$a 内容~属性を`反映する$。
◎
The crossOrigin IDL attribute reflects the ‘crossorigin’ content attribute.
</dd>
</dl>

		</section>
	</section>
</main>