精图规范1.0----18 脚本 Scripting

previous next   contents   elements   attributes   properties   index  

---

04 September 2001

18 脚本 Scripting

内容 Contents

• 18.1 指定脚本语言 Specifying the scripting language
  • 18.1.1 指定缺省的脚本语言 Specifying the default scripting language
  • 18.1.2 脚本语言的本地说明 Local declaration of a scripting language
• 18.2 脚本语言元素'script'  The 'script' element
• 18.3 事件处理 Event handling
• 18.4 事件属性 Event attributes
• 18.5 文档对象模型接口 DOM interfaces

  .

18.1 指定脚本语言 Specifying the scripting language

18.1.1 指定缺省的脚本语言 Specifying the default scripting language

精图元素 'svg' 中的属性contentScriptType 指定给出文档片断的缺省脚本语言。The contentScriptType attribute on the'svg' element specifies the default scriptinglanguage for the given document fragment.

contentScriptType = "content-type"

标识给出文档片断的缺省脚本语言。此属性设置用于处理事件属性中的值串的脚本语言.值 content-type 指定一个由[RFC2045]定义的媒体类型。缺省值为"text/ecmascript"。Identifies the default scriptinglanguage for the given document. This attribute sets the scripting languageused to process the value strings ineventattributes. The value content-type specifies a media type, per [RFC2045]. The default value is"text/ecmascript".
Animatable:no.

18.1.2 脚本语言的本地声明 Local declaration of a scripting language

可以为每个单独的 'script' 元素通过指定它的type 属性而指定脚本语言。It isalso possible to specify the scripting language for each individual'script' element by specifying a type attribute on the 'script' element.

18.2 脚本语言元素'script'  The 'script' element

一个 'script' 元素等价于HTML中的 'script' 元素，是安放脚本（例如，ECMAScript）的地方。任何定义在 'script' 元素中的函数在整个当前文档具有“全局”作用域。A 'script' element is equivalent to the 'script' element in HTML andthus is the place for scripts (e.g., ECMAScript). Any functions defined withinany 'script' element have a "global" scope across the entire currentdocument.

下面的例子script01 定义一个函数circle_click ，在'circle' 元素中的onclick 事件属性调用此函数。下面左边绘制的是初始的图像，而右边绘制的是在圆周上点击鼠标后的结果。Example script01 defines a functioncircle_click which is called by the onclick event attribute on the'circle' element. The drawing below on the leftis the initial image. The drawing below on the right shows the result after clickingon the circle.

注意这个例子示范了 onclick 事件属性的使用，只是一种解释性的目的。例子预先假设所使用的输入设备具有与一个鼠标相同的行为，但并非总是是这样的。为了支持较广泛的用户，应该用onactivate 事件属性代替onclick 事件属性。Note thatthis example demonstrates the use of the onclickevent attribute for explanatory purposes. The example presupposes the presenceof an input device with the same behavioral characteristics as a mouse, whichwill not always be the case. To support the widest range of users, the onactivate event attribute should be used instead of theonclick event attribute.

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 

  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="6cm" height="5cm" viewBox="0 0 600 500"

     xmlns="http://www.w3.org/2000/svg">

  <desc>Example script01 - invoke an ECMAScript function from an onclick event

  </desc>

  <!-- ECMAScript to change the radius with each click -->

  <script type="text/ecmascript"> <![CDATA[

    function circle_click(evt) {

      var circle = evt.target;

      var currentRadius = circle.getAttribute("r");

      if (currentRadius == 100)

        circle.setAttribute("r", currentRadius*2);

      else

        circle.setAttribute("r", currentRadius*0.5);

    }

  ]]> </script>

  <!-- Outline the drawing area with a blue line -->

  <rect x="1" y="1" width="598" height="498" fill="none" stroke="blue"/>

  <!-- Act on each click event -->

  <circle onclick="circle_click(evt)" cx="300" cy="225" r="100"

          fill="red"/>

  <text x="300" y="480" 

        font-family="Verdana" font-size="35" text-anchor="middle">

    Click on circle to change its size

  </text>

</svg>

   

例子script01  Example script01

 观看这个精图例子（只对可以浏览精图的浏览器有效）View this example as SVG (SVG-enabled browsers only)
 

<!ELEMENT script (#PCDATA) >

<!ATTLIST script

  %stdAttrs;

  %xlinkRefAttrs;

  xlink:href %URI; #IMPLIED

  externalResourcesRequired %Boolean; #IMPLIED

  type %ContentType; #REQUIRED >

属性定义：Attribute definitions:

type = "content-type"

标识给定的'script' 元素的脚本语言。值content-type 指定一个由 [RFC2045]规定的媒体类型。Identifies the scriptinglanguage for the given 'script' element. Thevaluecontent-type specifies a media type, per [RFC2045].Animatable:no.

 

其他地方已经定义的属性 Attributesdefined elsewhere:

%stdAttrs;,%xlinkRefAttrs;,href,externalResourcesRequired.

18.3 事件处理 Event handling

当下列情况之一出现时事件可使脚本得到执行：Events can cause scripts to execute when either of the following hasoccurred:

• 事件属性例如"onclick" 或 "onload" 被指派给特定的元素，这儿，事件属性的值包含当此事件发生时将被执行的脚本。Event attributes such as "onclick" or "onload" are assigned to particular elements, where the value of the event attributes contains script which is executed when the given event occurs.
• 正如"文档对象模型事件" [DOM2-EVENTS] 中所描述的 事件监听器 被定义，当给定的对象上的给定事件发生时调用它们。Event listeners as described in "Document Object Model Events" [DOM2-EVENTS] are defined which are invoked when a given event happens on a given object

规范的相关章节：Relatedsections of the spec:

• 用户接口事件 描述了一个精图用户代理如何处理象指针移动事件（例如，鼠标移动）和激活事件（例如，鼠标点击）这样的事件。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).
• 与DOM2事件的关系 描述了精图支持DOM的哪一部分，如何注册事件监听器。Relationship with DOM2 events describes what parts of DOM are supported by SVG and how to register event listeners

18.4 事件属性 Event attributes

下列事件属性在很多精图元素中是可用的。The following event attributes are available on many SVG elements.

事件的完整列表是精图语言和精图文档对象模型的部分，这些事件的描述在所支持事件的完整列表中提供。The complete list of events thatare part of the SVG language and SVG DOM and descriptions of those events isprovided in Completelist of supported events.

在图形和容器元素中的事件属性 Event attributes on graphics and container elements

<!ENTITY % graphicsElementEvents

  "onfocusin %Script; #IMPLIED

   onfocusout %Script; #IMPLIED

   onactivate %Script; #IMPLIED

   onclick %Script; #IMPLIED

   onmousedown %Script; #IMPLIED

   onmouseup %Script; #IMPLIED

   onmouseover %Script; #IMPLIED

   onmousemove %Script; #IMPLIED

   onmouseout %Script; #IMPLIED

   onload %Script; #IMPLIED" >

文档级的事件属性 Document-level event attributes

<!ENTITY % documentEvents

  "onunload %Script; #IMPLIED

   onabort %Script; #IMPLIED

   onerror %Script; #IMPLIED

   onresize %Script; #IMPLIED

   onscroll %Script; #IMPLIED

   onzoom %Script; #IMPLIED" >

动画事件属性 Animation event attributes

<!ENTITY % animationEvents

  "onbegin %Script; #IMPLIED

   onend %Script; #IMPLIED

   onrepeat %Script; #IMPLIED" >

Animatable:no.

18.5 文档对象模型接口 DOM interfaces

下面定义下列接口： SVGScriptElement, SVGEvent, SVGZoomEvent.The following interfaces are defined below: SVGScriptElement,SVGEvent,SVGZoomEvent.

 

接口 SVGScriptElement  Interface SVGScriptElement

接口 SVGScriptElement   与元素'script' 相对应。The SVGScriptElement interface corresponds to the 'script' element.

IDL 定义 IDLDefinition

interface SVGScriptElement : 

                SVGElement,

                SVGURIReference,

                SVGExternalResourcesRequired { 

           attribute DOMString type;

                       // raises DOMException on setting

};

 

属性 Attributes

DOMString type

与给定的元素'script' 的属性 type 相对应。Correspondsto attribute type on the given 'script' element.

设置时的例外 Exceptions on setting

DOMException

 

NO_MODIFICATION_ALLOWED_ERR: 当企图改变只读属性的值时发生。Raised on an attempt to change the value of a readonly attribute.

 

接口SVGEvent Interface SVGEvent

精图事件集中包含一个在精图中可用的特殊事件类型的列表。The SVG event set contains a list of special event types which areavailable in SVG.

一个文档对象模型的消费者可以使用接口 DOMImplementation的 hasFeature 来确定精图事件集是否被文档对象模型的实现所所实现。这一事件集的特征串为 "SVGEvents". 此串也在方法 createEvent中使用。A DOM consumer can use the hasFeature of the DOMImplementationinterface to determine whether the SVG event set has been implemented by a DOMimplementation. The feature string for this event set is "SVGEvents".This string is also used with the createEvent method.

精图事件使用基本的文档对象模型事件接口传递上下文信息。The SVG events use the base DOM Event interface to pass contextualinformation.

可以发生的这种事件的不同类型为：The different types of such events that can occur are:

SVGLoad

See SVGLoad event.

·  Bubbles: No

·  Cancelable: No

·  Context Info: None

SVGUnload

See SVGUnload event.

·  Bubbles: No

·  Cancelable: No

·  Context Info: None

SVGAbort

See SVGAbort event.

·  Bubbles: Yes

·  Cancelable: No

·  Context Info: None

SVGError

See SVGError event.

·  Bubbles: Yes

·  Cancelable: No

·  Context Info: None

SVGResize

See SVGResize event.

·  Bubbles: Yes

·  Cancelable: No

·  Context Info: None

SVGScroll

See SVGScroll event.

·  Bubbles: Yes

·  Cancelable: No

·  Context Info: None

IDL 定义 IDLDefinition

interface SVGEvent : events::Event {};

 

 

接口SVGZoomEvent  Interface SVGZoomEvent

一个文档对象模型的消费者可以使用接口 DOMImplementation的 hasFeature 来确定精图缩放事件集是否被文档对象模型的实现所所实现。这一事件集的特征串为 "SVGZoomEvents". 此串也在方法 createEvent中使用。A DOM consumer can use the hasFeature of the DOMImplementationinterface to determine whether the SVG zoom event set has been implemented by aDOM implementation. The feature string for this event set is"SVGZoomEvents". This string is also used with the createEventmethod.

在进行缩放事件之前进行缩放事件的处理。文档对象模型的其余部分表示文档以前的状态。当事件处理程序正常返回时，文档将被更新。The zoom event handler occurs before the zoom event is processed.The remainder of the DOM represents the previous state of the document. Thedocument will be updated upon normal return from the event handler.

缩放事件的UI事件类型为：The UI event type for a zoomevent is:

SVGZoom

当用户执行一种动作导致精图片断的当前视图被重新设置比例时，便出现缩放事件。事件处理程序只在'svg' 元素中才被识别。参见 SVGZoom event。The zoom event occurs when the userinitiates an action which causes the current view of the SVG document fragmentto be rescaled. Event handlers are only recognized on 'svg'elements. SeeSVGZoomevent.

·  Bubbles: Yes

·  Cancelable: No

·  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.)

IDL定义  IDLDefinition

interface SVGZoomEvent : events::UIEvent { 

  readonly attribute SVGRect zoomRectScreen;

  readonly attribute float previousScale;

  readonly attribute SVGPoint previousTranslate;

  readonly attribute float newScale;

  readonly attribute SVGPoint newTranslate;

};

 

属性 Attributes

readonly SVGRect zoomRectScreen

按照屏幕单位指定缩放矩形。The specified zoom rectangle in screen units.

对象本身和它的内容都是只读的。The object itself and its contents are both readonly.

readonly float previousScale

用于存放在缩放操作进行之前来自以前的缩放操作的比例因子。The scale factor from previous zoom operations that was in placebefore the zoom operation occurred.

readonly SVGPoint previousTranslate

用于存放在缩放操作进行之前来自以前的缩放操作的变换值。The translation values from previous zoom operations that were inplace before the zoom operation occurred.

对象本身和它的内容都是只读的。The object itself and its contents are both readonly.

readonly float newScale

在进行了缩放操作之后，此比例因子将被设置。The scale factor that will be in place after the zoom operation hasbeen processed.

readonly SVGPoint newTranslate

用于存放在缩放操作被处理之后缩放操作的变换值。The translation values that will be in place after the zoomoperation has been processed.

对象本身和它的内容都是只读的。The object itself and its contents are both readonly.

---

previous next   contents   elements   attributes   properties   index