SVG Tiny 1.2 – 20081222

15 スクリプトの利用

目次

15.1 スクリプト言語の指定

15.1.1 既定のスクリプト言語の指定

svg 要素の contentScriptType 属性は文書片において既定となるスクリプト言語を指定する。 The 'contentScriptType' attribute on the 'svg' element specifies the default scripting language for the given document fragment.

15.1.2 スクリプト言語の局所的宣言

個々の scripthandler 要素に type 属性を設定することにより、それぞれの要素に個別にスクリプト言語を指定することもできる。 It is also possible to specify the scripting language for each individual 'script' or 'handler' elements by specifying a 'type' attribute on the 'script' and 'handler' elements.

15.2 script 要素

script 要素には実行可能な内容( ECMAScript [ECMA-262] や Java [JAVA] JAR ファイルなど)またはそれへの参照を含められる。実行可能な内容はスクリプト(テキストのコード)またはコンパイル済みのコードの形で与えられる。コードがテキストの場合は script 要素内に(文字データとして)インラインに埋め込むことも xlink:href 属性からの参照として外部リソースに置くこともできる。コンパイル済みのコードは外部リソースでなければならない。 script 要素が xlink:href 属性も文字データの子も持つ場合、スクリプトの実行可能な内容は xlink:href 属性の IRI から取得され、子の内容はスクリプトのコンテクストに追加されない。 A 'script' element may either contain or point to executable content (e.g., ECMAScript [ECMA-262] or Java [JAVA] JAR file). Executable content can come either in the form of a script (textual code) or in the form of compiled code. If the code is textual, it can either be placed inline in the 'script' element (as character data) or as an external resource, referenced through 'xlink:href' attribute. Compiled code must be an external resource. If a 'script' element has both an 'xlink:href' attribute and child character data, the executable content for the script is retrieved from the IRI of the 'xlink:href' attribute, and the child content is not added to the scripting context.

実行可能な内容がインラインに埋め込まれている場合、 インラインの実行可能内容の処理 に従って処理されなければならない。 When the executable content is inlined, it must be processed as described in Processing inline executable content.

ECMAScript など一部のスクリプト言語には「グローバルスコープ」あるいは「グローバルオブジェクト」の概念があり、単独のグローバルオブジェクトが文書に関連付けられていなければならない(各 uDOM Document ノードに対し一意的)。このオブジェクトは文書に含まれるすべての要素から共有される。従って script 要素に定義される任意の ECMAScript 関数はスクリプトが属する文書全体の「グローバル」スコープに入る。このグローバルオブジェクトは SVGGlobal インターフェースを実装しなければならない。加えて、グローバル ECMAScript オブジェクトが実装されているなら、 SVGGlobal オブジェクトは Document オブジェクトの DocumentView::defaultView 属性を通しても得られる。イベント属性と handler 要素を通して付加されたイベントリスナは、それらが定義された文書のグローバルスコープで実行される。 Some scripting languages such as ECMAScript have a notion of a "global scope" or a "global object" such that a single global object must be associated with the document (unique for each uDOM Document node). This object is shared by all elements contained in that document. Thus, an ECMAScript function defined within any 'script' element must be in the "global" scope of the entire document to which the script belongs. The global object must implement the SVGGlobal interface. In addition to being implemented on the global ECMAScript object, the SVGGlobal object can also be obtained through the DocumentView::defaultView attribute on the Document object. Event listeners attached through event attributes and 'handler' elements are also evaluated using the global scope of the document in which they are defined.

( Java などの)コンパイラ言語には「グローバルスコープ」の概念が無く、基本的に各々の script 要素が別々のスコープオブジェクトを与える。このスコープオブジェクトは uDOM の章で述べられるように初期化されなければならず、 handler 要素のためのイベントリスナファクトリの役割を果たさなければならない。 For compiled languages (such as Java) that don't have a notion of "global scope", each 'script' element, in effect, provides a separate scope object. This scope object must perform an initialization as described in the uDOM chapter and serves as event listener factory for the 'handler' element.

15.2.1 スクリプトの処理

script 要素の実行は高々1回までになる。このふるまいを施行するため、各 script 要素に概念的なフラグが関連付けられる(ここでは「処理済み」フラグと称する)。 script 要素がいつ実行されるかは、文書への要素の挿入のされ方に依存する。 Execution of a given 'script' element occurs at most once. There is a conceptual flag associated with each 'script' element (referred to here as the "already processed" flag) that enforces this behavior. When a 'script' element is executed depends on the method by which the element was inserted into the document.

文書内への script 要素の挿入のされ方の一つは、文書のパース中における挿入になる。 漸進的描画 に示したように、文書がパースされる中で script 要素に遭遇すると、その要素終了イベントが生じた直後、かつ、文書の残り部分のパースと更なるノードの追加の前に処理が行われる( script 要素が処理されるとは何を意味するかは下の説明を見よ)。一旦処理が済めば、文書のパースは再開される。 One way for a 'script' element to be inserted into the document is if it was inserted while parsing the document. As mentioned in Progressive rendering, as the document is parsed if a 'script' element is encountered then it will be processed just after its end element event occurs, but before any more of the document is parsed and further nodes inserted into the document. (See below for a description of what it means for a 'script' element to be processed.) Once processed, parsing of the document resumes.

文書内への script 要素の挿入の他のされ方は(他のスクリプトの実行など)パーサ以外による何かになる。この場合、1つ以上の script 要素が文書へ挿入された時点で、それらは1つずつ文書順に処理されなければならない。 The other way a 'script' element can be inserted into the document is if it was inserted by something other than the parser (such as by other script executing). In this case, as soon as one or more 'script' elements are inserted into the document, they must be processed one by one in document order.

script 要素は以下のように処理される: A 'script' element is processed as follows:

  1. script 要素の「処理済み」フラグが真か, 要素が文書木に含まれていない場合、何もせず終了。 If the 'script' element's "already processed" flag is true or if the element is not in the document tree, then no action is performed and these steps are ended.

  2. script 要素が外部のスクリプト内容を参照している場合、 xlink:href 属性の現在の値から外部のスクリプト内容が取得される。更なる script 要素の処理は外部のスクリプト内容に依存し、リソース取得が完了するか 無効な IRI 参照 であることが確定するまで処理はブロックされる。 If the 'script' element references external script content, then the external script content using the current value of the 'xlink:href' attribute is fetched. Further processing of the 'script' element is dependent on the external script content, and will block here until the resource has been fetched or is determined to be an invalid IRI reference.

  3. script 要素の「処理済み」フラグを真に設定する。 The 'script' element's "already processed" flag is set to true.

  4. スクリプト内容がインラインまたは外部からのもので取得が成功した場合、そのスクリプトは実行される。このとき、スクリプトの実行結果が更なる script 要素の文書への挿入を生じさせる場合、これらの段階に再入が生じ得ることに注意。 If the script content is inline, or if it is external and was fetched successfully, then the script is executed. Note that at this point, these steps may be re-entrant if the execution of the script results in further 'script' elements being inserted into the document.

一旦処理が済むと load イベントが script 要素に配送されることに注意。ただし、外部のスクリプト内容への参照が 無効な IRI 参照 で、かつ externalResourcesRequired'true' に設定されている場合を除く。 Note that a load event is dispatched on a 'script' element once it has been processed, unless it referenced external script content with an invalid IRI reference and 'externalResourcesRequired' was set to 'true'.

スクリプトの実行が開始された後の script 要素(またはその内容)に対する変更はスクリプトの実行に影響してはならない。 Modifying or removing the 'script' element (or content) after the script has started its execution must have no effect on the script execution.

「処理済み」フラグが真に設定された後の script 要素の xlink:href 属性に対する変更が新たなスクリプト内容の取得や実行を生じさせることはない。 Modifying a 'script' element's 'xlink:href' attribute after its "already processed" flag is set to true will not cause any new script content to be fetched or executed.

何らかのスクリプト内容の実行が何を意味するかはスクリプト内容の種類に依存する。 SVG Tiny 1.2 は特定のプログラミング言語のサポートを要求しない。しかしながら、 SVG は2つの特定のスクリプト言語に対し、実装がサポートするふるまいを定める: What it means to execute some script content depends on the script content type. SVG Tiny 1.2 does not require support for any particular programming language. However, SVG defines the behavior for two specific script types in the case where an implementation supports it:

application/ecmascript

この型の実行可能な内容は ECMAScript プログラミング言語のソースコードでなければならない。このコードは上で説明したように、この要素を所有する文書のグローバルスコープのコンテクストで実行されなければならない。 This type of executable content must be source code for the ECMAScript programming language. This code must be executed in the context of this element's owner document's global scope as explained above.

HTTP などの内容コーディングをサポートするプロトコルを介して外部リソースを読み込む SVG 実装は、 gzip 圧縮により符号化された外部スクリプトファイルを受け入れられなければならない( HTTP では "Content-Encoding: gzip" で判別される)。 SVG implementations that load external resources through protocols such as HTTP that support content coding must accept external script files that have been encoded using gzip compression (flagged using "Content-Encoding: gzip" for HTTP).

application/java-archive

この型の実行可能な内容は Java JAR アーカイブを格納する外部リソースでなければならない。 JAR アーカイブのマニフェストファイルには名前が SVG-Handler-Class のエントリがなければならない。エントリの値はアーカイブに含まれる完全修飾 Java クラス名でなければならない。 UA は JAR ファイルからこのクラスをインスタンス化して EventListenerInitializer2 インターフェースにキャストした後、 script 要素オブジェクト自身をパラメタとして initializeEventListeners メソッドを呼び出さなければならない。SVG-Handler-Class に挙げられたクラスが EventListenerInitializer2 を実装していない場合、 エラー状態 になる。 This type of executable content must be an external resource that contains a Java JAR archive. The manifest file in the JAR archive must have an entry named SVG-Handler-Class. The entry's value must be a fully-qualified Java class name for a class contained in this archive. The user agent must instantiate the class from the JAR file and cast it to the EventListenerInitializer2 interface. Then the initializeEventListeners method must be called with the 'script' element object itself as a parameter. If a class listed in SVG-Handler-Class does not implement EventListenerInitializer2, it is an error.

UA は同じ URL から読み込まれたクラスを再利用してもよく、故に、コードはどの script 要素あるいはどの文書もそれら自身の別個のクラスオブジェクトを所持するものと見なしてはならないことに注意。例えば、クラスの静的フィールドが文書から非公開になると見なすことはできない。 Note that the user agent may reuse classes loaded from the same URL, so the code must not assume that every 'script' element or every document will create its own separate class object. Thus, one cannot assume, for instance, that static fields in the class are private to a document.

実装は SVG 1.1 との後方互換性をとるため、 'text/ecmascript' の型のスクリプトを受け入れなければならない。しかしながら、この型は廃止予定であり内容作成者は利用すべきではない。 Implementations must also accept the script type 'text/ecmascript' for backwards compatibility with SVG 1.1. However, this type is deprecated and should not be used by content authors.

他の言語束縛は上で述べた2つのいずれかと類似した行程をとることが奨励される。 Other language bindings are encouraged to adopt a similar approach to either of the two described above.

Example 18_01circle 要素がクリックされたときに呼び出される関数 circle_click を定義している。下の図の左側は初期状態の画像、右側はクリック後の結果を示す。この例はこの章で後で述べる handler 要素を利用している。 Example 18_01 defines a function circle_click which is called when the 'circle' element is being clicked. The drawing below on the left is the initial image. The drawing below on the right shows the result after clicking on the circle. The example uses the 'handler' element which is described further down in this chapter.

この例は説明目的で click イベントの利用を例示していることに注意。例ではマウスと同じふるまいをする入力装置の存在を仮定しているが、常に存在しているとは限らない。可能な限り広範囲の利用者をサポートするためには、 click イベントの代わりに DOMActivate イベントが用いられるべきである。 Note that this example demonstrates the use of the click event 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 DOMActivate event should be used instead of the click event.

Example: 18_01.svg
<?xml version="1.0"?>
<svg width="6cm" height="5cm" viewBox="0 0 600 500"
     xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
     xmlns:ev="http://www.w3.org/2001/xml-events">
  <!-- click イベントからの ECMAScript 関数の呼び出し -->
  <desc>Example: invoke an ECMAScript function from an click event
  </desc>
  <!-- クリックごとに半径を変化させる ECMAScript -->
  <!-- ECMAScript to change the radius with each click -->
  <script type="application/ecmascript"> <![CDATA[
    function circle_click(evt) {
      var circle = evt.target;
      var currentRadius = circle.getFloatTrait("r");
      if (currentRadius == 100)
        circle.setFloatTrait("r", currentRadius*2);
      else
        circle.setFloatTrait("r", currentRadius*0.5);
    }
  ]]> </script>
  
  <!-- 描画領域の外形線を青色の線でなぞる -->
  <!-- Outline the drawing area with a blue line -->
  <rect x="1" y="1" width="598" height="498" fill="none" stroke="blue"/>
  <!-- Act on each click event -->
  <circle cx="300" cy="225" r="100" fill="red">
  <handler type="application/ecmascript" ev:event="click"> 
        circle_click(evt);
    </handler>
  </circle>  
  
  <text x="300" y="480" font-family="Verdana" font-size="35" text-anchor="middle">
    Click on circle to change its size
  </text>
</svg>
Example 18_01 - invoke an ECMAScript function from an onclick event - before first click     Example 18_01 - invoke an ECMAScript function from an onclick event - after first click

同じスクリプトが呼び出される。ここでは外部ファイル。 Here the same script is invoked, this time in an external file.

Example: 18_02.svg
<?xml version="1.0"?>
<svg width="6cm" height="5cm" viewBox="0 0 600 500"
     xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
     xmlns:ev="http://www.w3.org/2001/xml-events">
  <!-- click から外部 ECMAScript 関数を呼び出す -->
  <desc>Example: invoke an external ECMAScript function from an click event
  </desc>
  <!-- 各 click ごとに半径を変更する ECMAScript -->
  <!-- ECMAScript to change the radius with each click -->
  <script type="application/ecmascript" xlink:href="sample.es"/> 
  
  <!-- 青線で描画領域を縁取る -->
  <!-- Outline the drawing area with a blue line -->
  <rect x="1" y="1" width="598" height="498" fill="none" stroke="blue"/>
  <!-- 各 click ごとに実行 -->
  <!-- Act on each click event -->
  <circle cx="300" cy="225" r="100" fill="red">
  <handler type="application/ecmascript" ev:event="click"> 
        circle_click(evt);
    </handler>
  </circle>  
  
  <text x="300" y="480" font-family="Verdana" font-size="35" text-anchor="middle">
    Click on circle to change its size
  </text>
</svg>
Schema: script
    <define name='script'>
      <element name='script'>
        <ref name='script.AT'/>
        <ref name='script.ATCM'/>
      </element>
    </define>

    <define name='script.AT' combine='interleave'>
      <ref name='svg.CorePreserve.attr'/>
      <ref name='svg.External.attr'/>
      <ref name='svg.ContentType.attr'/>
    </define>

    <define name='script.ATCM'>
      <interleave>
        <choice>
          <group>
            <ref name='svg.XLinkRequired.attr'/>
          </group>
          <text/>
        </choice>
        <ref name='svg.Desc.group'/>
      </interleave>
    </define>

属性定義:

type = "<content-type>"

script 要素のプログラミング言語を特定する。 "<content-type>" の値は Multipurpose Internet Mail Extensions (MIME) Part Two [RFC2046] によるメディア型。 type が指定されなかった場合、 svg 要素の contentScriptType の値が利用されるものとする(その 省略値'application/ecmascript' [RFC4329] )。 script 要素が SVG 文書片 に含まれていない場合の規定の type'application/ecmascript' でなければならない(このようなことは例えば script 要素が何らかの任意の非 SVG マークアップの子要素だった場合などに有り得る)。 Identifies the programming language for the 'script' element. The "<content-type>" value specifies a media type, per Multipurpose Internet Mail Extensions (MIME) Part Two [RFC2046]. If 'type' is not specified, the value of 'contentScriptType' on the 'svg' element shall be used, which in turn has a lacuna value of 'application/ecmascript' [RFC4329]. If a 'script' element is not inside an SVG document fragment, 'type' must default to 'application/ecmascript'. This can happen for example if the 'script' element is a child of some arbitrary non-SVG markup.

アニメーション:不可

xlink:href = "<IRI>"

スクリプトコードが含まれる外部リソースへの IRI 参照 。属性値に 無効な IRI 参照 が含まれている場合、 script 要素はいかなるスクリプトも実行しないことになる。 An IRI reference to an external resource containing the script code. If the attribute contains an invalid IRI reference, the 'script' element will not execute any script.

アニメーション:不可

15.3 XML Events

XML Events [XML-EVENTS] はイベントリスナとハンドラを DOM Level 2 Events [DOM2EVENTS] に統合するための XML 構文である。 SVG 1.1 の 宣言的イベント処理は言語に強く結びついており、開発者はイベントハンドラを要素の構文に埋め込まなければならなかった(要素に onclick 属性を与えるなど)。 SVG Tiny 1.2 はイベント属性( onload, onclick, onactivate, 等々)をサポートしない。代わりにイベントリスナをグラフィック内容と分けて指定できるようにするため、 listener および handler 要素の組み込みを通して XML Events を利用する。 XML Events [XML-EVENTS] is an XML syntax for integrating event listeners and handlers with DOM Level 2 Events [DOM2EVENTS]. Declarative event handling in SVG 1.1 was hardwired into the language, in that the developer was required to embed the event handler in the element syntax (e.g. an element with an 'onclick' attribute). SVG Tiny 1.2 does not support the event attributes ('onload', 'onclick', 'onactivate', etc.). Instead SVG Tiny 1.2 uses XML Events, through the inclusion of the 'listener' and 'handler' elements to provide the ability to specify the event listener separately from the graphical content.

SVG Tiny 1.2 でサポートされる イベントの完全な一覧 については対話性の章を見よ。 The list of events supported by SVG Tiny 1.2 is given in the Interactivity chapter.

SVG Tiny 1.2 内容にハンドラを設置する方法には2通りある。最初の方法は単純な場合に適する: There are two ways to place a handler in SVG Tiny 1.2 content. The first method is most suitable for simple cases:

Example: simplehandler.svg
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:ev="http://www.w3.org/2001/xml-events"
     version="1.2" baseProfile="tiny">
       
  <rect x="10" y="20" width="10" height="20" fill="red">
    <handler type="application/ecmascript" ev:event="click">
      var theRect = evt.target;
      var width = theRect.getFloatTrait("width");
      theRect.setFloatTrait("width", width + 10);
    </handler>
  </rect>
    
</svg>

この方法では handler 要素が オブザーバ ([XML-EVENTS], 3.1 節) の子要素になる。例えば handlerrect 要素の子要素に設置すれば 'rect' がオブザーバになる。これにより対象のイベント(この場合 click )が rect に生じる度に handler 要素が呼び出されるようになる。 In this method the 'handler' element is a child element of the observer ([XML-EVENTS], section 3.1). For instance one can place a 'handler' as a child of a 'rect' element, which becomes the observer. This causes the 'handler' element to be invoked whenever the event that it is interested in (click, in this case) occurs on the 'rect'.

次の SVG 文書は XML Events を利用して handler 要素を複数のオブジェクトから再利用できるようにする例である。 XML Events の listener 要素を利用して、特定の event に対し observerhandler を指定している。 The following is an example of an SVG document using XML Events where the 'handler' element can be reused on several objects. The 'listener' element from XML Events is used to specify the 'observer' and 'handler' for a particular 'event'.

Example: handler.svg
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
     xmlns:ev="http://www.w3.org/2001/xml-events">
     
  <!-- handler 要素の用例 -->
  <desc> An example of the handler element. </desc>

  <rect xml:id="theRect1" x="10" y="20" width="10" height="20" fill="red"/>
  <rect xml:id="theRect2" x="10" y="40" width="10" height="20" fill="green"/>

  <ev:listener event="click" observer="theRect1" handler="#theClickHandler"/>
  <ev:listener event="click" observer="theRect2" handler="#theClickHandler"/>
                 
  <handler xml:id="theClickHandler" type="application/ecmascript">
    var theRect = evt.target;
    var width = theRect.getFloatTrait("width");
    theRect.setFloatTrait("width", (width+10));
  </handler>

</svg>

上の例では "theRect1" または "theRect2" に click イベントが生じた際に要素 "theClickHandler" が呼び出されるように listener 要素を登録している。 In the above example, the 'listener' element registers that the "theClickHandler" element should be invoked whenever a click event happens on "theRect1" or "theRect2".

XML Events の構文と handler 要素の組み合わせにより、コンパイラ言語においてはより簡単にイベント処理が行えるようになる。下は Java 言語によるイベントハンドラの用例になる: The combination of the XML Events syntax and the new 'handler' element allows event handling to be more easily processed in a compiled language. Below is an example of an event handler using the Java language:

Example: javahandler.svg
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
     xmlns:ev="http://www.w3.org/2001/xml-events"
     xmlns:foo="http://www.example.com/foo"
      xmlns:xlink="http://www.w3.org/1999/xlink">
     
  <!-- Java ハンドラの例 -->
  <desc>Example of a Java handler</desc>

  <rect xml:id="theRect" x="10" y="20" width="200" height="300" fill="red"/>

  <!-- EventListenerInitializer2 オブジェクトを含む jar へ参照 -->
  <!-- reference a jar containing an EventListenerInitializer2 object -->
  <script type="application/java-archive" xml:id="init" xlink:href="http://example.com/theJar.jar"/>
  
  <!-- theRect.click に対するリスナを登録 -->
  <!-- register a listener for a theRect.click event -->
  <ev:listener event="click" observer="theRect" handler="#theClickHandler" />

  <handler xml:id="theClickHandler" type="application/java-archive" xlink:href="#init" foo:offset="10"/>      

</svg>

この場合、 handler 要素は EventListenerInitializer2 インターフェースに適合するコンパイル済みコードの場所を指定する script 要素を参照している。 UA は対象のインターフェース内の createEventListener メソッドを呼び出す。 In this case, the 'handler' element specifies a reference to the 'script' element that specifies the location of compiled code that conforms to the EventListenerInitializer2 interface. The user agent invokes the createEventListener method within the targeted interface.

ここでは theJar.jar マニフェストの SVG-Handler-Class エントリから参照される MyListenerInitializer クラスは次のように定義されている: In this case, the MyListenerInitializer class referenced by the SVG-Handler-Class entry of the theJar.jar manifest has the following definition:

MyListenerInitializer
package com.example;

import org.w3c.dom.Document;
import org.w3c.dom.Element;
import org.w3c.dom.events.Event;
import org.w3c.dom.events.EventListener;
import org.w3c.dom.svg.EventListenerInitializer2;

public class MyListenerInitializer implements EventListenerInitializer2 {

   Document document;

    public void initializeEventListeners(Element scriptElement) {
        document = scriptElement.getOwnerDocument();
    }

    public EventListener createEventListener(final Element handlerElement) {
        return new EventListener() {
            public void handleEvent(Event event) {
                Element theRect = document.getElementById("theRect");
                float width = Float.parseFloat(theRect.getAttributeNS(null, "width"));
                float offset = Float.parseFloat(handlerElement.getAttributeNS("http://www.example.com/foo", "offset");
                theRect.setAttributeNS(null, "width", "" + (width + offset));
            }
        };
    }
}

EventListenerInitializer2 インターフェースは現在 SVG package に定義されている。将来版の仕様ではこの package を移動させるかもしれないが、 SVG package で常に利用可能なことは保証されている。 The EventListenerInitializer2 interface is currently defined in the SVG package. Future specifications may move this package though it is guaranteed to always be available in the SVG package.

15.4 listener 要素

XML Events からの listener 要素 [XML-EVENTS] はサポートされなければならない。 listener 要素の定義は [XML-EVENTS] で与えられている。この仕様からの追加の制約も適用されなければならない。 The 'listener' element from XML Events [XML-EVENTS] must be supported. The definition for the 'listener' element is provided in [XML-EVENTS]. Any additional restrictions from this specification must also apply.

要素の属性が変更される際は常に、対応するイベントリスナは取り除かれ, 新しいものが作成される。 listener 要素 が追加あるいは除去されればイベントリスナも追加あるいは除去される。 Whenever the attributes of a listener element are modified, the corresponding event listener is removed and a new one is created. When listener elements are added or removed, the event listener is added or removed respectively.

listener 要素は XML Events 名前空間で指定されなければならないことに注意。 SVG 名前空間において局所名として "listener" の要素があってもこの章で述べる要素と解釈してはならない。更に、 XML Events 名前空間においてのみ他の要素で利用できる XML Events 属性は、名前空間のない所でのみこの要素に利用可能である。【訳者は最後の文の意味を理解していません】 Please note that the 'listener' element must be specified in the XML Events namespace, and that an element in the SVG namespace with "listener" as its local name must not be understood as being the element described in this chapter. Furthermore, the XML Events attributes that are available on other elements only when they are in the XML Events namespace, are only available on this element when they are in no namespace.

Schema: listener
    <define name='listener'>
      <element name='listener'>
        <ref name='listener.AT'/>
        <ref name='listener.CM'/>
      </element>
    </define>

    <define name='listener.AT' combine='interleave'>
      <ref name='svg.Core.attr'/>
      <optional>
        <attribute name='event' svg:animatable='false' svg:inheritable='false'>
          <ref name='XML-NMTOKEN.datatype'/>
        </attribute>
      </optional>
      <optional>
        <attribute name='phase' svg:animatable='false' svg:inheritable='false'>
          <choice>
            <value>default</value>
            <value>capture</value>
          </choice>
        </attribute>
      </optional>
      <optional>
        <attribute name='propagate' svg:animatable='false' svg:inheritable='false'>
          <choice>
            <value>continue</value>
            <value>stop</value>
          </choice>
        </attribute>
      </optional>
      <optional>
        <attribute name='defaultAction' svg:animatable='false' svg:inheritable='false'>
          <choice>
            <value>perform</value>
            <value>cancel</value>
          </choice>
        </attribute>
      </optional>
      <optional>
        <attribute name='observer' svg:animatable='false' svg:inheritable='false'>
          <ref name='IDREF.datatype'/>
        </attribute>
      </optional>
      <optional>
        <attribute name='target' svg:animatable='false' svg:inheritable='false'>
          <ref name='IDREF.datatype'/>
        </attribute>
      </optional>
      <optional>
        <attribute name='handler' svg:animatable='false' svg:inheritable='false'>
          <ref name='IRI.datatype'/>
        </attribute>
      </optional>
    </define>


    <define name='listener.CM'>
      <empty/>
    </define>

属性定義:

event = "<XML-NMTOKEN>"

XML Events event 属性 の定義を参照のこと。 event 属性は サポートされるイベント一覧 に定められているように有効な SVG Tiny 1.2 イベント識別子でなければならない。 See the XML Events 'event' attribute definition. The 'event' attribute must be a valid SVG Tiny 1.2 event identifier as defined in the list of supported events.

アニメーション:不可

observer = "<IDREF>"

XML Events observer 属性 の定義を参照のこと。 observer 属性が与えられていない場合、オブザーバは listener 要素の親要素になる。 See the XML Events 'observer' attribute definition. Note that if the 'observer' attribute is not present, the observer is the parent of the 'listener' element.

アニメーション:不可

target = "<IDREF>"

XML Events target 属性 の定義を参照のこと。 See the XML Events 'target' attribute definition.

アニメーション:不可

handler = "<IRI>"

XML Events handler 属性 の定義を参照のこと。この属性は IRI 参照 である。この章で定めた、どの IRI が受け入れられるかの制約は守られなければならない。 See the XML Events 'handler' attribute definition. This attribute is an IRI reference. Restrictions specified in this chapter as to which IRIs are acceptable must be enforced.

アニメーション:不可

phase = "default"

XML Events phase 属性 の定義を参照のこと。 SVG Tiny 1.2 には捕獲過程のサポートは要求されない。サポートしない実装は、この属性に何も指定されなかったものとして処理しなければならない。 See the XML Events 'phase' attribute definition. Support for the capture phase is not required in SVG Tiny 1.2, and implementations that do not support it must process this attribute as if it had not been specified.

アニメーション:不可

propagate = "stop" | "continue"

XML Events propagate 属性 の定義を参照のこと。 See the XML Events 'propagate' attribute definition.

アニメーション:不可

defaultAction = "cancel" | "perform"

XML Events defaultAction 属性 の定義を参照のこと。 See the XML Events 'defaultAction' attribute definition.

アニメーション:不可

15.5 handler 要素

handler 要素は script 要素と似ている:その内容, インラインで埋め込まれるか参照されるか, UA に利用されるスクリプトエンジンから実行されるコードかどうか等々。 The 'handler' element is similar to the 'script' element: its contents, either included inline or referenced, is code that is to be executed by a scripting engine used by user agent.

しかしながら、 script 要素の内容は読み込まれた時点で実行されるのに対し、 handler 要素の内容はイベントに対する反応として実行される。これは SVG Tiny 1.2 が SVG Full イベント属性 ([SVG11], 18.4 節) が提供する機能と等価な機能を得るために handler 要素を利用していることを意味する。 However, where the 'script' element executes its contents when it is loaded, the 'handler' element must only execute its contents in response to an event. This means that SVG Tiny 1.2 uses 'handler' to get the functionality equivalent to that provided by SVG Full event attributes ([SVG11], section 18.4).

実行可能な内容がインライン化される際は インラインの実行可能内容の処理 に述べる手順に従って処理されなければならない。 When the executable content is inlined, it must be processed as described in Processing inline executable content.

例えば次の SVG 1.1 文書を考える: For example, consider the following SVG 1.1 document:

Example: nohandler.svg
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect id="theRect" x="10" y="20" width="200" height="300" fill="red"
        onclick="evt.target.width.baseVal.value += 10"/>
</svg>

上の例は下に示すように handler 要素と XML Events を用いて書き直されなければならない The above example must be rewritten, as described below, to use the 'handler' element and XML Events as shown:

Example: handler2.svg
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:ev="http://www.w3.org/2001/xml-events"
     version="1.2" baseProfile="tiny">

  <!-- handler 要素の例 -->
  <desc>handler element example</desc>

  <rect xml:id="theRect" x="10" y="20" width="200" height="300" fill="red">
    <handler type="application/ecmascript" ev:event="click">
      var theRect = evt.target;
      var width = theRect.getFloatTrait("width");
      theRect.setFloatTrait("width", width + 10);
    </handler>
  </rect>

</svg> 

handler 要素の type または ev:event 属性が変更される際は常に、対応するイベントリスナは取り除かれ、新しいものが作成される。 xlink:href 属性が変更されるか handler 要素の内容が変更される際は、既存のイベントリスナは保持されるが、 UA は更新されたハンドラのロジックを実行しなければならない。 handler 要素が追加あるいは除去されれば対応するイベントリスナも追加あるいは除去される。 Whenever the 'type' or ev:event attributes of a 'handler' element are modified, the corresponding event listener is removed and a new one is created. When the 'xlink:href' attribute is modified or the content of the 'handler' element is modified, the existing event listener is preserved, but the user agent must execute the updated handler logic. When 'handler' elements are added or removed, the corresponding event listener is added or removed respectively.

ECMAScript においては handler 要素の内容は概念的には下に示すように作成される新規の Function オブジェクトの内容として扱われる: In ECMAScript, the contents of the 'handler' element behave conceptually as if they are the contents of a new Function object, created as shown:

function(event) {
    var evt = event;
    //contents of handler
}

引数 'event' は handler を誘発したイベントに対応する Event オブジェクト である。変数名 'evt' を 'event' の代わりに用いてもよい( 'evt' は 'event' の別名になる)。 The 'event' parameter shown above is an Event object corresponding to the event that has triggered the 'handler'. An 'evt' variable can be used instead of 'event' ('evt' is an alias to 'event').

Schema: handler
    <define name='handler'>
      <element name='handler'>
        <ref name='handler.AT'/>
        <ref name='handler.ATCM'/>
      </element>
    </define>

    <define name='handler.AT' combine='interleave'>
      <ref name='svg.CorePreserve.attr'/>
      <ref name='svg.External.attr'/>
      <optional>
        <attribute name='ev:event' svg:animatable='false' svg:inheritable='false'>
          <ref name='XML-NMTOKEN.datatype'/>
        </attribute>
      </optional>
      <ref name='svg.ContentType.attr'/>
    </define>

    <define name='handler.ATCM'>
      <interleave>
        <choice>
          <group>
            <ref name='svg.XLinkRequired.attr'/>
          </group>
          <text/>
        </choice>
        <ref name='svg.Desc.group'/>
      </interleave>
    </define>

属性定義:

type = "<content-type>"

handler 要素のプログラミング言語を特定する。 "<content-type>" の値は Multipurpose Internet Mail Extensions (MIME) Part Two [RFC2046] によるメディア型。 type が指定されなかった場合、 svg 要素の contentScriptType の値が利用されるものとする(その 省略値'application/ecmascript' [RFC4329] )。 Identifies the programming language for the 'handler' element. The "<content-type>" value specifies a media type, per Multipurpose Internet Mail Extensions (MIME) Part Two [RFC2046]. If 'type' is not specified, the value of 'contentScriptType' on the 'svg' element shall be used, which in turn has a lacuna value of 'application/ecmascript' [RFC4329].

アニメーション:不可

xlink:href = "<IRI>"

この属性が存在する場合、 handler 要素のスクリプト内容はこのリソースから読み込まれなければならず、 handler 要素が含み得る内容が実行されてはならない。 If this attribute is present, then the script content of the 'handler' element must be loaded from this resource and what content the 'handler' element may have must not be executed.

アニメーション:不可

ev:event = "<XML-NMTOKEN>"

処理対象のイベント名。この属性は XML Events 名前空間 http://www.w3.org/2001/xml-events に属する。サポートされるすべてのイベントの一覧は イベント一覧 を見よ。 XML Events 仕様については ev:event 属性の定義 ([XML-EVENTS], 3.1 節) を参照のこと。 The name of the event to handle. This attribute is in the XML Events namespace, http://www.w3.org/2001/xml-events. See event list for a list of all supported events and the XML Events specification for the definition of the 'ev:event' attribute ([XML-EVENTS], section 3.1).

アニメーション:不可

Java におけるスクリプトハンドラにおいては xlink:href 属性は EventListenerInitializer2 の実装を指す SVG-Handler-Class エントリを含むマニフェストを保持する JAR アーカイブを参照する script 要素を参照しなければならない。 For script handlers in Java, the 'xlink:href' attribute must reference a 'script' element that itself references a JAR archive holding a manifest with an SVG-Handler-Class entry pointing to an EventListenerInitializer2 implementation.

15.5.1 handler 要素のパラメタ

スクリプト作成者は多くの場面で handler 要素を、その内容をパラメタにして他の関数を呼び出すためのひな形として用いている。しかしながらコンパイラ言語においては、 handler 要素は実行可能な内容を持ち得ない。 In many situations, the script author uses the 'handler' as a template for calling other functions, using the content of the 'handler' element to pass parameters. However, for compiled languages the 'handler' element does not have any executable content.

この場合、文書作成者は、パラメタをカスタム内容として、外部名前空間の子要素または外部名前空間の属性の形をとって handler 要素に埋め込むべきである。 In this case, the author should embed the parameters into the 'handler' as custom content in the form of element children in a foreign namespace, or attributes on the 'handler' element also in foreign namespaces.

handler 要素におけるパラメタの利用例を下に示す: Below is an example of using parameters on the 'handler' element:

Example: handlerparam.svg
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:ev="http://www.w3.org/2001/xml-events"
     xmlns:foo="http://www.example.com/foo"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.2" baseProfile="tiny">

  <!-- handler 要素にパラメタを埋め込む例 -->
  <desc> An example of parameters on the handler element. </desc>

  <rect xml:id="theRect" x="10" y="20" width="200" height="300" fill="red"/>               

  <!-- EventListenerInitializer2 オブジェクトを含む jar へ参照 -->
  <!-- reference a jar containing an EventListenerInitializer2 object -->
  <script type="application/java-archive" xml:id="init" xlink:href="http://example.com/theJar.jar"/>

  <!-- theRect.click に対するリスナを登録 -->
  <!-- register a listener for a theRect.click event -->
  <ev:listener event="click" observer="theRect" handler="#theClickHandler" />

  <handler xml:id="theClickHandler" type="application/java-archive" xlink:href="#init">
    <foo:offset value="10"/>
    <foo:person>
     <foo:name>Victor Vector</foo:name>
     <foo:age>42</foo:age>
    </foo:person>
  </handler>

</svg>

この場合、 theJar.jar マニフェストの SVG-Handler-Class エントリから参照されるオブジェクトの createEventListener メソッドが呼び出され、返り値の EventListener が登録される。要素 "theRect" の click イベントがオブザーブされているときはいつでも、リスナの handleEvent メソッドが呼び出される。オブジェクトは http://www.example.com/foo 名前空間内の要素からパラメタを得るために handler 要素へアクセスできるようになる。 In this case, the object referenced by the SVG-Handler-Class entry of the theJar.jar manifest has its createEventListener method called and the returned EventListener registered. Whenever a click event on the "theRect" element is observed, the handleEvent method of the listener is called. The object can then access the 'handler' element in order to obtain its parameters from elements in the http://www.example.com/foo namespace.

15.6 イベント処理

次のいずれかの場合、イベントはスクリプトを実行させなければならない: Events must cause scripts to execute when either of the following has occurred:

関連する仕様の節: Related sections of the spec:

15.7 インラインの実行可能内容の処理

scripthandler 要素のような実行可能な要素に実行可能な内容がインラインで埋め込まれた際は、そのパースと実行の前に以下の段階が踏まれなければならない。 When executable content is inlined inside an executable element such as 'script' or 'handler' elements, it must be processed as follows before it is parsed and executed.

type 属性, contentScriptType, 省略値, 属性, 既定, いずれかにより得られた内容型が UA に未知であった場合、 UA は内容を無視し、それに対するそれ以上の処理を行ってはならない。 If the type of the content, obtained either through the 'type' attribute, the 'contentScriptType' or its lacuna value, attribute, or the default is not known by the user agent, then the user agent must ignore the content and no further processing must be performed.

内容型が XML メディア型 [RFC3023] の場合、実行可能な要素の部分木全体を何も手を加えずにスクリプトエンジンへ渡さなければならない。 If the type of the content is an XML media type [RFC3023], then the entire subtree of the executable element must be passed on untouched to the script engine.

そうでない場合、 UA のスクリプトエンジンに渡される内容は以下の段階を踏んで取得されなければならない: Otherwise, the content that the user agent's script engine obtains must be that which is obtained through the following steps:

  1. 実行可能要素内のすべての子孫要素を除去する。 Remove all descendant elements of the executable element.
  2. 実行可能要素のテキスト内容( DOM Level 3 Core ([DOM3], 1.4 節) の Node::textContent )を利用する。 Then, use the text content of the executable element (as defined by Node::textContent in DOM Level 3 Core ([DOM3], section 1.4) of the executable element.