SVG11/script.html

<!DOCTYPE html>
<html lang="ja">
<head>


	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title title="Scripting">スクリプト – SVG 1.1 （第２版）</title>
	<link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css">
	<link rel="stylesheet" href="style/W3C-REC.css">
</head><body>

<div class="header top">
<a href="index.html#minitoc">目次</a> ⋅
<a href="expanded-toc.html">詳細目次</a> ⋅
<a href="linking.html">前章</a> ⋅
<a href="animate.html">次章</a> ⋅
<a href="eltindex.html">要素</a> ⋅
<a href="attindex.html">属性</a> ⋅
<a href="propidx.html">プロパティ</a>
</div>

<h1 title="18 Scripting">18 スクリプト</h1>

<h2 title="Contents" id="toc">目次</h2>

<ul class="toc">
<li><a title="18.1 Specifying the scripting language" href="script.html#ScriptingLanguage">
18.1 スクリプト言語の指定</a>
<ul class="toc">
<li><a title="18.1.1 Specifying the default scripting language" href="script.html#DefaultScriptingLanguage">
18.1.1 既定のスクリプト言語の指定</a></li>
<li><a title="18.1.2 Local declaration of a scripting language" href="script.html#SpecifiedScriptingLanguage">
18.1.2 スクリプト言語の局所宣言</a></li>
</ul></li>
<li><a title="18.2 The ‘script’ element" href="script.html#ScriptElement">
18.2 <span class="element-name">script</span> 要素</a></li>
<li><a title="18.3 Event handling" href="script.html#EventHandling">
18.3 イベント処理</a></li>
<li><a title="18.4 Event attributes" href="script.html#EventAttributes">
18.4 イベント属性</a>
<ul class="toc">
<li><a title="18.4.1 Event attribute for the SVGLoad event" href="script.html#LoadEvent">
18.4.1 SVGLoad イベントに対するイベント属性</a></li><!--  -->
<li><a title="18.4.2 Event attributes on graphics and container elements" href="script.html#GraphicsEvents">
18.4.2 グラフィックス要素とコンテナ要素に対するイベント属性</a></li><!--  -->
<li><a title="18.4.3 Document-level event attributes" href="script.html#DocumentEvents">
18.4.3 文書レベルイベント属性</a></li><!--  -->
<li><a title="18.4.4 Animation event attributes" href="script.html#AnimationEvents">
18.4.4 アニメーションイベント属性</a></li></ul></li><!--  -->
<li><a title="18.5 DOM interfaces" href="script.html#DOMInterfaces">
18.5 DOM インタフェース</a>
<ul class="toc">
<li><a title="18.5.1 Interface SVGScriptElement" href="script.html#InterfaceSVGScriptElement">
18.5.1 インタフェース SVGScriptElement</a></li>
<li><a title="18.5.2 Interface SVGZoomEvent" href="script.html#InterfaceSVGZoomEvent">
18.5.2 インタフェース SVGZoomEvent</a></li>
</ul></li>
</ul>

<h2 title="18.1 Specifying the scripting language" id="ScriptingLanguage">18.1 スクリプト言語の指定</h2>

<h3 title="18.1.1 Specifying the default scripting language" id="DefaultScriptingLanguage">18.1.1 既定のスクリプト言語の指定</h3>

<p class="T">
<a href="struct.html#SVGElement"><span class="element-name">svg</span></a>
要素の
<a href="script.html#ContentScriptTypeAttribute"><span class="attr-name">contentScriptType</span></a>
属性は文書片において既定のものとなるスクリプト言語を指定する。
<span lang="en">
The ‘contentScriptType’ attribute on the ‘svg’ element specifies the default scripting language for the given document fragment.
</span></p>


    <div class="adef-list">
      <dl><dt id="ContentScriptTypeAttribute"><span class="adef">contentScriptType</span> = "<span class="attr-value"><em>content-type</em></span>"</dt><dd>

<p class="T">
SVG 文書片において既定のものとなるスクリプト言語を特定する。
この属性は
<a href="script.html#EventAttributes">イベント属性</a>
に与えられた文字列値の処理に利用される既定のスクリプト言語を設定する。
この言語は、自身のスクリプト言語を指定しないスクリプトのすべてのインスタンスに対し利用されなければならない。
値 <span class="attr-value"><em>content-type</em></span> には
<a href="http://www.ietf.org/rfc/rfc2046.txt">MIME Part Two: Media Types</a>
によるメディア型を指定する。
既定値は "application/ecmascript"
[<a href="refs.html#ref-RFC4329">RFC4329</a>]
である。
<span lang="en">
Identifies the default scripting language for the given SVG document fragment. This attribute sets the default scripting language used to process the value strings in event attributes. This language must be used for all instances of script that do not specify their own scripting language. The value content-type specifies a media type, per MIME Part Two: Media Types [RFC2046]. The default value is 'application/ecmascript' [RFC4329].
</span></p>


<span class="anim-target"><a href="animate.html#Animatable">アニメーション：</a>不可</span>

</dd></dl>
    </div>

<h3 title="18.1.2 Local declaration of a scripting language" id="SpecifiedScriptingLanguage">18.1.2 スクリプト言語の局所宣言</h3>

<p class="T">
各
<a href="script.html#ScriptElement"><span class="element-name">script</span></a>
要素ごとに個別にスクリプト言語を指定するには、
<a href="script.html#ScriptElement"><span class="element-name">script</span></a>
要素の
<a href="script.html#ScriptElementTypeAttribute"><span class="attr-name">type</span></a>
属性に言語を指定する。
<span lang="en">
It is also possible to specify the scripting language for each individual ‘script’ element by specifying a ‘type’ on the ‘script’ element.
</span></p>


<h2 title="18.2 The ‘script’ element" id="ScriptElement">18.2 <span class="element-name">script</span> 要素</h2>

<p class="T">
<a href="script.html#ScriptElement"><span class="element-name">script</span></a>
要素は HTML の
<a href="script.html#ScriptElement"><span class="element-name">script</span></a>
要素と同じであり、スクリプト（例えば ECMAScript ）の置き場を提供する。
<a href="script.html#ScriptElement"><span class="element-name">script</span></a>
要素内で定義される関数は現在の文書全体に渡り「大域的」なスコープを持つ。
<span lang="en">
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.
</span></p>

<p class="T" id="ExampleScript01">
下の <span class="example-ref">Example script01</span> では関数 <code>circle_click</code> が定義されており、
<a href="shapes.html#CircleElement"><span class="element-name">circle</span></a>
要素の
<a href="script.html#OnClickEventAttribute"><span class="attr-name">onclick</span></a>
イベント属性から呼び出される。
下の図左は初期状態の画像である。
図右は円形をクリックした後の結果を示している。
<span lang="en">
Example script01 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.
</span></p>

<p class="T">
この例は説明目的で
<a href="script.html#OnClickEventAttribute"><span class="attr-name">onclick</span></a>
イベント属性を利用しているに過ぎないことに注意。
例ではマウスと同じふるまいをする入力装置の存在を仮定しているが、常に存在しているとは限らない。
可能な限り広範な利用者をサポートするためには
<a href="script.html#OnClickEventAttribute"><span class="attr-name">onclick</span></a>
イベント属性の代わりに
<a href="script.html#OnActivateEventAttribute"><span class="attr-name">onactivate</span></a>
イベント属性が用いられるべきである。
<span lang="en">
Note that this example demonstrates the use of the ‘onclick’ event attribute for explanatory purposes. The example presupposes the presence of an input device with the same behavioral characteristics as a mouse, which will not always be the case. To support the widest range of users, the ‘onactivate’ event attribute should be used instead of the ‘onclick’ event attribute.
</span></p>

<p class="T" id="ScriptElementExecution">
<a href="script.html#ScriptElement"><span class="element-name">script</span></a>
要素の実行前には解決された
<a href="script.html#ScriptElementTypeAttribute"><span class="attr-name">type</span></a>
のメディア型の値が検査されなければならない。
<a href="intro.html#TermUserAgent"><span class="svg-term">SVG-UA</span></a>
がそのスクリプト言語をサポートしない場合、
<a href="script.html#ScriptElement"><span class="element-name">script</span></a>
要素は実行されてはならない。
<span lang="en">
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.
</span></p>


<pre class="xml">&lt;?xml version="1.0" standalone="no"?&gt;
&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
&lt;svg width="6cm" height="5cm" viewBox="0 0 600 500"
     xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
  &lt;desc&gt;Example script01 - <span title="invoke an ECMAScript function from an onclick event"
  >onclick イベントからの ECMAScript 関数の呼び出し</span>
  &lt;/desc&gt;
  &lt;!-- <span title="ECMAScript to change the radius with each click"
  >クリックごとに半径を変化させる ECMAScript</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 title="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 title="Act on each click event"
  >各 click イベントごとに発動</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><table><caption>Example script01</caption><tbody><tr><td><img title="Example script01 — invoke an ECMAScript function from an onclick event — before first click" alt="Example script01 — invoke an ECMAScript function from an onclick event — before first click" src="images/script/script01.png">&nbsp;<img title="Example script01 — invoke an ECMAScript function from an onclick event — after first click" alt="Example script01 — invoke an ECMAScript function from an onclick event — after first click" src="images/script/script01-AfterClick.png"></td></tr></tbody></table>
<p class="view-as-svg"><a href="images/script/script01.svg">この例を SVG で表示（ SVG 対応ブラウザのみ）</a></p>


<div class="element-summary"><div class="element-summary-name"><span class="element-name">script</span></div><dl><dt>分類：</dt><dd>None</dd><dt>内容モデル：</dt>
<dd title="Any elements or character data.">
任意の要素または文字データ
</dd>
<dt>属性：</dt><dd><ul class="no-bullets">
<li><a class="T-ex" href="intro.html#TermCoreAttributes">中核属性</a></li>
<li><a class="T-ex" href="intro.html#TermXLinkAttributes">xlink 属性</a><span>
<a href="script.html#ScriptElementHrefAttribute"><span class="attr-name">xlink:href</span></a></span></li>
<li><a href="struct.html#ExternalResourcesRequiredAttribute"><span class="attr-name">externalResourcesRequired</span></a></li><li><a href="script.html#ScriptElementTypeAttribute"><span class="attr-name">type</span></a></li><li><a href="script.html#ScriptElementHrefAttribute"><span class="attr-name">xlink:href</span></a></li></ul></dd><dt>DOM インタフェース：</dt><dd><ul class="no-bullets"><li><a class="idlinterface" href="script.html#InterfaceSVGScriptElement">SVGScriptElement</a></li></ul></dd></dl></div>

    <div class="adef-list">
      <p><em>属性定義</em></p>
      <dl><dt id="ScriptElementTypeAttribute"><span class="adef">type</span> = "<span class="attr-value"><em>content-type</em></span>"</dt><dd>

<p class="T">
<a href="script.html#ScriptElement"><span class="element-name">script</span></a>
要素のプログラミング言語を指示する。
値 <span class="attr-value"><em>content-type</em></span> には
<a href="http://www.ietf.org/rfc/rfc2046.txt">多目的インターネットメール拡張‎ (MIME) 第２部</a>
[<a href="refs.html#ref-RFC2046">RFC2046</a>]
によるメディア型を指定する。
<a href="script.html#ScriptElementTypeAttribute"><span class="attr-name">type</span></a>
が与えられなかった場合、
<a href="struct.html#SVGElement"><span class="element-name">svg</span></a>
要素の
<a href="script.html#ContentScriptTypeAttribute"><span class="attr-name">contentScriptType</span></a>
の値、すなわち既定では <span class="attr-value">"application/ecmascript"</span>
[<a href="refs.html#ref-RFC4329">RFC4329</a>]
）が用いられるものとする。
<a href="script.html#ScriptElement"><span class="element-name">script</span></a>
要素が
<a href="intro.html#TermOutermostSVGElement"><span class="svg-term">最も外側の svg 要素</span></a>
の外側にある状況で
<a href="script.html#ScriptElementTypeAttribute"><span class="attr-name">type</span></a>
が与えられていなかった場合の既定の
<a href="script.html#ScriptElementTypeAttribute"><span class="attr-name">type</span></a>
は "application/ecmascript" でなければならない
[<a href="refs.html#ref-RFC4329">RFC4329</a>]
。
<span lang="en">
Identifies the scripting language for the given ‘script’ element. The value content-type specifies a media type, per Multipurpose Internet Mail Extensions (MIME) Part Two [RFC2046]. If a ‘type’ is not provided, the value of ‘contentScriptType’ on the ‘svg’ element shall be used, which in turn defaults to "application/ecmascript" [RFC4329]. If a ‘script’ element falls outside of the outermost svg element and the ‘type’ is not provided, the ‘type’ must default to "application/ecmascript" [RFC4329].
</span></p>


<span class="anim-target"><a href="animate.html#Animatable">アニメーション：</a>不可</span>

</dd><dt id="ScriptElementHrefAttribute"><span class="adef">xlink:href</span> =
        "<a href="types.html#DataTypeIRI"><span class="attr-value">&lt;iri&gt;</span></a>"</dt><dd>

<p class="T">
スクリプトコードを含む外部リソースへの
<a href="linking.html#IRIReference">IRI 参照</a>
。
<span lang="en">
An IRI reference to an external resource containing the script code.
</span></p>


<span class="anim-target"><a href="animate.html#Animatable">アニメーション：</a>不可</span>

</dd></dl>
    </div>

<h2 title="18.3 Event handling" id="EventHandling">18.3 イベント処理</h2>

<p class="T">
次のいずれかが生じる時、イベントによりスクリプトが実行される：
<span lang="en">
Events can cause scripts to execute when either of the following has occurred:
</span></p>


<ul>

<li class="T">
特定の要素の
<a href="script.html#OnClickEventAttribute"><span class="attr-name">onclick</span></a>
や
<a href="script.html#OnLoadEventAttribute"><span class="attr-name">onload</span></a>
などの
<a href="script.html#EventAttributes">イベント属性</a>
の値としてイベントが生じた時に実行されるスクリプトがあてがわれている。
<span lang="en">
Event attributes such as ‘onclick’ or ‘onload’ are assigned to particular elements, where the values of the event attributes are script which is executed when the given event occurs.
</span></li>

<li class="T">
<a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/">DOM Level 2 Events</a>
[<a href="refs.html#ref-DOM2EVENTS">DOM2EVENTS</a>]
の
<a href="svgdom.html#EventListeners">イベントリスナ</a>
が定義されていて、オブジェクトにイベントが生じた時に誘発される。
<span lang="en">
Event listeners as described in DOM Level 2 Events [DOM2EVENTS] are defined which are invoked when a given event happens on a given object.
</span></li>
</ul>

<p class="T">
この仕様の関連する節：
<span lang="en">
Related sections of the spec:
</span></p>


<ul>

<li class="T">
<a href="interact.html#UIEvents">UI イベント</a>
では、ポインタ移動イベント（例えばマウスの動き）や活性化イベント（例えばマウスクリック）などのイベントを SVG-UA がどう処理するかについて述べている。
<span lang="en">
User interface events describes how an SVG user agent handles events such as pointer movements events (e.g., mouse movement) and activation events (e.g., mouse click).
</span></li>

<li class="T">
<a href="svgdom.html#RelationshipWithDOM2Events">DOM2 イベントとの関係</a>
では、 DOM のどの部分が SVG でサポートされているかについてと、イベントリスナの登録の仕方について述べている。
<span lang="en">
Relationship with DOM2 events describes what parts of DOM are supported by SVG and how to register event listeners.
</span></li>
</ul>

<h2 title="18.4 Event attributes" id="EventAttributes">18.4 イベント属性</h2>

<p class="T">
多くの SVG 要素で以下のイベント属性が利用できる。
<span lang="en">
The following event attributes are available on many SVG elements.
</span></p>

<p class="T">
SVG 言語の一部としてのイベントの完全な一覧およびそれらのイベントに対する SVG DOM とその説明については
<a href="interact.html#SVGEvents">サポートされるイベントの完全な一覧</a>
を見よ。
<span lang="en">
The complete list of events that are part of the SVG language and SVG DOM and descriptions of those events is provided in Complete list of supported events.
</span></p>


<h3 title="18.4.1 Event attribute for the SVGLoad event" id="LoadEvent">18.4.1 SVGLoad イベントに対するイベント属性</h3>

<p class="T">
以下に
<a href="script.html#OnLoadEventAttribute"><span class="attr-name">onload</span></a>
イベント属性の定義を示す。
イベント属性はすべての
<a href="intro.html#TermAnimationElement"><span class="svg-term">アニメーション要素</span></a>
および、ほとんどの
<a href="intro.html#TermGraphicsElement"><span class="svg-term">グラフィックス要素</span></a>
と
<a href="intro.html#TermContainerElement"><span class="svg-term">コンテナ要素</span></a>
に指定できる。
<a href="script.html#OnLoadEventAttribute"><span class="attr-name">onload</span></a>
イベント属性は
<a href="intro.html#TermGraphicalEventAttribute"><span class="svg-term">グラフィカルイベント属性</span></a>
と
<a href="intro.html#TermAnimationEventAttribute"><span class="svg-term">アニメーションイベント属性</span></a>
のいずれにも分類される。
（要素に
<a href="intro.html#TermGraphicalEventAttribute"><span class="svg-term">グラフィカルイベント属性</span></a>
が指定可能かどうかについては各要素の定義を見よ。）
<span lang="en">
Below is the definition for the ‘onload’ event attribute. It can be specified on all of the animation elements and most of the graphics elements and container elements. The ‘onload’ event attribute is classified as both a graphical event attribute and an animation event attribute. (See the definition for each element to determine whether it can have a graphical event attribute specified on it.)
</span></p>


<div class="adef-list">
  <p><em>属性定義</em></p>
  <dl><dt id="OnLoadEventAttribute"><span class="adef">onload</span> = "<a href="types.html#DataTypeAnything"><span class="attr-value">&lt;anything&gt;</span></a>"</dt><dd>

<p class="T">
SVGLoad イベントに対する「浮上」または「標的上」過程のリスナが属性が指定された要素に対し発火される際に実行されるスクリプトを指定する。
<span lang="en">
Specifies some script to execute when "bubbling" or "at target" phase listeners for the SVGLoad event are fired on the element the attribute is specified on.
</span></p>


<span class="anim-target"><a href="animate.html#Animatable">アニメーション：</a>不可</span>

</dd></dl>
</div>

<h3 title="18.4.2 Event attributes on graphics and container elements" id="GraphicsEvents">18.4.2 グラフィックス要素とコンテナ要素に対するイベント属性</h3>

<p class="T">
以下に
<a href="intro.html#TermGraphicalEventAttribute"><span class="svg-term">グラフィカルイベント属性</span></a>
の定義を示す。
これらはほとんどの
<a href="intro.html#TermGraphicsElement"><span class="svg-term">グラフィックス要素</span></a>
と
<a href="intro.html#TermContainerElement"><span class="svg-term">コンテナ要素</span></a>
に指定できる。
（要素に
<a href="intro.html#TermGraphicalEventAttribute"><span class="svg-term">グラフィカルイベント属性</span></a>
が指定可能かどうかについては各要素の定義を見よ。）
<span lang="en">
Below are the definitions for the graphical event attributes. These can be specified on most graphics elements and container elements. (See the definition for each element to determine whether it can have a graphical event attribute specified on it.)
</span></p>

<p class="T">
上に定義された
<a href="script.html#OnLoadEventAttribute"><span class="attr-name">onload</span></a>
は
<a href="intro.html#TermGraphicalEventAttribute"><span class="svg-term">グラフィカルイベント属性</span></a>
にも分類されることに注意。
<span lang="en">
Note that ‘onload’, defined above, is also classified as a graphical event attribute.
</span></p>


<div class="adef-list">
  <p><em>属性定義</em></p>
  <dl><dt id="OnFocusInEventAttribute"><span class="adef">onfocusin</span> = "<a href="types.html#DataTypeAnything"><span class="attr-value">&lt;anything&gt;</span></a>"</dt><dt id="OnFocusOutEventAttribute"><span class="adef">onfocusout</span> = "<a href="types.html#DataTypeAnything"><span class="attr-value">&lt;anything&gt;</span></a>"</dt><dt id="OnActivateEventAttribute"><span class="adef">onactivate</span> = "<a href="types.html#DataTypeAnything"><span class="attr-value">&lt;anything&gt;</span></a>"</dt><dt id="OnClickEventAttribute"><span class="adef">onclick</span> = "<a href="types.html#DataTypeAnything"><span class="attr-value">&lt;anything&gt;</span></a>"</dt><dt id="OnMouseDownEventAttribute"><span class="adef">onmousedown</span> = "<a href="types.html#DataTypeAnything"><span class="attr-value">&lt;anything&gt;</span></a>"</dt><dt id="OnMouseUpEventAttribute"><span class="adef">onmouseup</span> = "<a href="types.html#DataTypeAnything"><span class="attr-value">&lt;anything&gt;</span></a>"</dt><dt id="OnMouseOverEventAttribute"><span class="adef">onmouseover</span> = "<a href="types.html#DataTypeAnything"><span class="attr-value">&lt;anything&gt;</span></a>"</dt><dt id="OnMouseMoveEventAttribute"><span class="adef">onmousemove</span> = "<a href="types.html#DataTypeAnything"><span class="attr-value">&lt;anything&gt;</span></a>"</dt><dt id="OnMouseOutEventAttribute"><span class="adef">onmouseout</span> = "<a href="types.html#DataTypeAnything"><span class="attr-value">&lt;anything&gt;</span></a>"</dt><dd>

<p class="T">
対応するイベントに対する「浮上」または「標的上」過程のリスナが属性が指定された要素に対し発火される際に実行されるスクリプトを指定する。
これらのイベント属性のそれぞれがどのイベントに対応するかについては
<a href="interact.html#SVGEvents">サポートされるイベントの完全な一覧</a>
を見よ。
<span lang="en">
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 the Complete list of support events to determine which event each of these event attributes corresponds to.
</span></p>


<span class="anim-target"><a href="animate.html#Animatable">アニメーション：</a>不可</span>

</dd></dl>
</div>

<h3 title="18.4.3 Document-level event attributes" id="DocumentEvents">18.4.3 文書レベルイベント属性</h3>

<p class="T">
以下に
<a href="intro.html#TermDocumentEventAttribute"><span class="svg-term">文書イベント属性</span></a>
の定義を示す。
これらは
<a href="struct.html#SVGElement"><span class="element-name">svg</span></a>
要素にのみ指定できる。
<span lang="en">
Below are the definitions for the document event attributes. These can be specified only on ‘svg’ elements.
</span></p>


<div class="adef-list">
  <p><em>属性定義</em></p>
  <dl><dt id="OnUnloadEventAttribute"><span class="adef">onunload</span> = "<a href="types.html#DataTypeAnything"><span class="attr-value">&lt;anything&gt;</span></a>"</dt><dt id="OnAbortEventAttribute"><span class="adef">onabort</span> = "<a href="types.html#DataTypeAnything"><span class="attr-value">&lt;anything&gt;</span></a>"</dt><dt id="OnErrorEventAttribute"><span class="adef">onerror</span> = "<a href="types.html#DataTypeAnything"><span class="attr-value">&lt;anything&gt;</span></a>"</dt><dt id="OnResizeEventAttribute"><span class="adef">onresize</span> = "<a href="types.html#DataTypeAnything"><span class="attr-value">&lt;anything&gt;</span></a>"</dt><dt id="OnScrollEventAttribute"><span class="adef">onscroll</span> = "<a href="types.html#DataTypeAnything"><span class="attr-value">&lt;anything&gt;</span></a>"</dt><dt id="OnZoomEventAttribute"><span class="adef">onzoom</span> = "<a href="types.html#DataTypeAnything"><span class="attr-value">&lt;anything&gt;</span></a>"</dt><dd>

<p class="T">
対応するイベントに対する「浮上」または「標的上」過程のリスナが属性が指定された要素に対し発火される際に実行されるスクリプトを指定する。
これらのイベント属性のそれぞれがどのイベントに対応するかについては
<a href="interact.html#SVGEvents">サポートされるイベントの完全な一覧</a>
を見よ。
<span lang="en">
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 the Complete list of support events to determine which event each of these event attributes corresponds to.
</span></p>


<span class="anim-target"><a href="animate.html#Animatable">アニメーション：</a>不可</span>

</dd></dl>
</div>

<h3 title="18.4.4 Animation event attributes" id="AnimationEvents">18.4.4 アニメーションイベント属性</h3>

<p class="T">
以下に
<a href="intro.html#TermAnimationEventAttribute"><span class="svg-term">アニメーションイベント属性</span></a>
の定義を示す。
これらは
<a href="intro.html#TermAnimationElement"><span class="svg-term">アニメーション要素</span></a>
に指定できる。
<span lang="en">
Below are the definitions for the animation event attributes. These can be specified on the animation elements.
</span></p>

<p class="T">
上に定義された
<a href="script.html#OnLoadEventAttribute"><span class="attr-name">onload</span></a>
は
<a href="intro.html#TermAnimationEventAttribute"><span class="svg-term">アニメーションイベント属性</span></a>
にも分類されることに注意。
<span lang="en">
Note that ‘onload’, defined above, is also classified as an animation event attribute.
</span></p>


<div class="adef-list">
  <p><em>属性定義</em></p>
  <dl><dt id="OnBeginEventAttribute"><span class="adef">onbegin</span> = "<a href="types.html#DataTypeAnything"><span class="attr-value">&lt;anything&gt;</span></a>"</dt><dt id="OnEndEventAttribute"><span class="adef">onend</span> = "<a href="types.html#DataTypeAnything"><span class="attr-value">&lt;anything&gt;</span></a>"</dt><dt id="OnRepeatEventAttribute"><span class="adef">onrepeat</span> = "<a href="types.html#DataTypeAnything"><span class="attr-value">&lt;anything&gt;</span></a>"</dt><dd>

<p class="T">
対応するイベントの「浮上」または「標的上」過程のリスナが、属性が指定された要素に対し発火された際に実行されるスクリプトを指定する。
これらのイベント属性のそれぞれがどのイベントに対応するかについては
<a href="interact.html#SVGEvents">サポートされるイベントの完全な一覧</a>
を見よ。
<span lang="en">
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 the Complete list of support events to determine which event each of these event attributes corresponds to.
</span></p>


<span class="anim-target"><a href="animate.html#Animatable">アニメーション：</a>不可</span>

</dd></dl>
</div>

<h2 title="18.5 DOM interfaces" id="DOMInterfaces">18.5 DOM インタフェース</h2>

<h3 title="18.5.1 Interface SVGScriptElement" id="InterfaceSVGScriptElement">18.5.1 インタフェース SVGScriptElement</h3>

<p class="T">
<a class="idlinterface" href="script.html#InterfaceSVGScriptElement">SVGScriptElement</a>
インタフェースは
<a href="script.html#ScriptElement"><span class="element-name">script</span></a>
要素に対応する。
<span lang="en">
The SVGScriptElement interface corresponds to the ‘script’ element.
</span></p>


<pre class="idl">interface <b>SVGScriptElement</b> : <a class="idlinterface" href="types.html#InterfaceSVGElement">SVGElement</a>,
                             <a class="idlinterface" href="types.html#InterfaceSVGURIReference">SVGURIReference</a>,
                             <a class="idlinterface" href="types.html#InterfaceSVGExternalResourcesRequired">SVGExternalResourcesRequired</a> {
  attribute DOMString <a href="script.html#__svg__SVGScriptElement__type">type</a> setraises(<a class="idlinterface" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187">DOMException</a>);
};</pre><dl class="interface"><dt>属性</dt><dd><dl class="attributes">
<dt id="__svg__SVGScriptElement__type"><b>type</b><span class="idl-type-parenthetical"> (DOMString)</span></dt><dd>

<p class="T">
与えられた
<a href="script.html#ScriptElement"><span class="element-name">script</span></a>
要素の
<a href="script.html#ScriptElementTypeAttribute"><span class="attr-name">type</span></a>
属性に対応する。
<span lang="en">
Corresponds to attribute ‘type’ on the given ‘script’ element.
</span></p>

<dl class="attribute"><dt>設定時の例外</dt><dd><dl class="exceptions"><dt><a class="idlinterface" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187">DOMException</a>,
code NO_MODIFICATION_ALLOWED_ERR</dt>

<dd class="T">
<a href="svgdom.html#ReadOnlyNodes">読み取り専用の属性</a>
の変更を試みたときに投出される。
<span lang="en">
Raised on an attempt to change the value of a read only attribute.
</span>
</dd>
</dl></dd></dl></dd></dl></dd></dl>


<h3 title="18.5.2 Interface SVGZoomEvent" id="InterfaceSVGZoomEvent">18.5.2 インタフェース SVGZoomEvent</h3>

<p class="T">
SVG ズームイベントセットが DOM 実装により実装されたかどうかの判定には、 DOMImplementation インタフェースの hasFeature を利用できる。
このイベントセットに対する特能文字列は "SVGZoomEvents" である。
この文字列は createEvent メソッドにも利用される。
<span lang="en">
A DOM consumer can use the hasFeature of the DOMImplementation interface to determine whether the SVG zoom event set has been implemented by a DOM implementation. The feature string for this event set is "SVGZoomEvents". This string is also used with the createEvent method.
</span></p>

<p class="T">
zoom イベントハンドラはズームイベントの処理前に呼び出される。
DOM における他の部分は文書の以前の状態のままである。
文書はイベントハンドラが正常に終了したときに更新される。
<span lang="en">
The zoom event handler occurs before the zoom event is processed. The remainder of the DOM represents the previous state of the document. The document will be updated upon normal return from the event handler.
</span></p>

<p class="T">
ズームイベントに対する UI イベント型は：
<span lang="en">
The UI event type for a zoom event is:
</span></p>


 <dl>
   <dt><strong>SVGZoom</strong></dt>
   <dd>

<p class="T">
ズームイベントは, 利用者により SVG 文書片の現在の表示が等倍される際に生じる。
イベントハンドラは
<a href="struct.html#SVGElement"><span class="element-name">svg</span></a>
要素においてのみ有効である。
<a href="interact.html#ZoomEvent">SVGZoom イベント</a>
を見よ。
<span lang="en">
The zoom event occurs when the user initiates an action which causes the current view of the SVG document fragment to be rescaled. Event handlers are only recognized on ‘svg’ elements. See SVGZoom event.
</span></p>


     <ul>

<li class="T">
浮上：無し
<span lang="en">
Bubbles: Yes
</span></li>

<li class="T">
キャンセル：不可
<span lang="en">
Cancelable: No
</span></li>

<li class="T">
文脈情報：
zoomRectScreen, previousScale, previousTranslate, newScale, newTranslate, screenX, screenY, clientX, clientY, altKey, ctrlKey, shiftKey, metaKey, relatedNode
<br />
（ screenX, screenY, clientX, clientY はズーム領域の中心を指示する。
clientX, clientY は対応する
<a href="struct.html#SVGElement"><span class="element-name">svg</span></a>
要素のビューポートにおける座標である。
relatedNode は対応する
<a href="struct.html#SVGElement"><span class="element-name">svg</span></a>
要素である。）
<span lang="en">
Context Info: zoomRectScreen, previousScale, previousTranslate, newScale, newTranslate, screenX, screenY, clientX, clientY, altKey, ctrlKey, shiftKey, metaKey, relatedNode. (screenX, screenY, clientX and clientY indicate the center of the zoom area, with clientX and clientY in viewport coordinates for the corresponding ‘svg’ element. relatedNode is the corresponding ‘svg’ element.)
</span></li>

     </ul>
   </dd>
 </dl>
<pre class="idl">interface <b>SVGZoomEvent</b> : UIEvent {
  readonly attribute <a class="idlinterface" href="types.html#InterfaceSVGRect">SVGRect</a> <a href="script.html#__svg__SVGZoomEvent__zoomRectScreen">zoomRectScreen</a>;
  readonly attribute float <a href="script.html#__svg__SVGZoomEvent__previousScale">previousScale</a>;
  readonly attribute <a class="idlinterface" href="coords.html#InterfaceSVGPoint">SVGPoint</a> <a href="script.html#__svg__SVGZoomEvent__previousTranslate">previousTranslate</a>;
  readonly attribute float <a href="script.html#__svg__SVGZoomEvent__newScale">newScale</a>;
  readonly attribute <a class="idlinterface" href="coords.html#InterfaceSVGPoint">SVGPoint</a> <a href="script.html#__svg__SVGZoomEvent__newTranslate">newTranslate</a>;
};</pre><dl class="interface"><dt>属性</dt><dd><dl class="attributes">
<dt id="__svg__SVGZoomEvent__zoomRectScreen"><b>zoomRectScreen</b><span class="idl-type-parenthetical"> (readonly
<a class="idlinterface" href="types.html#InterfaceSVGRect">SVGRect</a>)</span></dt><dd><div>

<p class="T">
スクリーン単位で指定されるズーム矩形。
<!-- 
<span class="transNote">【
screen unit — ディスプレイなどの物理的装置における物理的画素に対応する単位と思われる。
】</span>
 -->
<span lang="en">
The specified zoom rectangle in screen units.
</span></p>

<p class="T">
<a class="idlinterface" href="types.html#InterfaceSVGRect">SVGRect</a>
オブジェクトは読み取り専用である。
<span lang="en">
The SVGRect object is read only.
</span></p>

</div></dd>
<dt id="__svg__SVGZoomEvent__previousScale"><b>previousScale</b><span class="idl-type-parenthetical"> (readonly float)</span></dt><dd>

<p class="T">
ズーム操作が行われる前の前回のズーム操作後における倍率。
<span lang="en">
The scale factor from previous zoom operations that was in place before the zoom operation occurred.
</span></p>

</dd>
<dt id="__svg__SVGZoomEvent__previousTranslate"><b>previousTranslate</b><span class="idl-type-parenthetical"> (readonly
<a class="idlinterface" href="coords.html#InterfaceSVGPoint">SVGPoint</a>)</span></dt><dd><div>

<p class="T">
ズーム操作が行われる前の前回のズーム操作後における並進量。
<span lang="en">
The translation values from previous zoom operations that were in place before the zoom operation occurred.
</span></p>

<p class="T">
<a class="idlinterface" href="coords.html#InterfaceSVGPoint">SVGPoint</a>
オブジェクトは読み取り専用である。
<span lang="en">
The SVGPoint object is read only.
</span></p>

</div></dd>
<dt id="__svg__SVGZoomEvent__newScale"><b>newScale</b><span class="idl-type-parenthetical"> (readonly float)</span></dt><dd>

<p class="T">
ズーム操作が行われた後の倍率。
<span lang="en">
The scale factor that will be in place after the zoom operation has been processed.
</span></p>

</dd>
<dt id="__svg__SVGZoomEvent__newTranslate"><b>newTranslate</b><span class="idl-type-parenthetical"> (readonly
<a class="idlinterface" href="coords.html#InterfaceSVGPoint">SVGPoint</a>)</span></dt><dd><div>

<p class="T">
ズーム操作が行われた後の並進量。
<span lang="en">
The translation values that will be in place after the zoom operation has been processed.
</span></p>

<p class="T">
<a class="idlinterface" href="coords.html#InterfaceSVGPoint">SVGPoint</a>
オブジェクトは読み取り専用である。
<span lang="en">
The SVGPoint object is read only.
</span></p>

</div></dd></dl></dd></dl>

<div class="header bottom">
<a href="index.html#minitoc">目次</a> ⋅
<a href="expanded-toc.html">詳細目次</a> ⋅
<a href="linking.html">前章</a> ⋅
<a href="animate.html">次章</a> ⋅
<a href="eltindex.html">要素</a> ⋅
<a href="attindex.html">属性</a> ⋅
<a href="propidx.html">プロパティ</a>
</div><script src="style/expanders.js" type="text/javascript"> </script>


</body>
</html>