previous next   contents   elements   attributes   properties   index

04 September 2001

16 交互性 Interactivity

内容 Contents

• 16.1 引言 Introduction
• 16.2 所支持事件的完全列表 Complete list of supported events
• 16.3 用户界面事件 User interface events
• 16.4 指点事件 Pointer events
• 16.5 用户界面事件的处理顺序 Processing order for user interface events
• 16.6 指点事件属性 'pointer-events'   The 'pointer-events' property
• 16.7 放大和平移 Magnification and panning
• 16.8 光标 Cursors
  • 16.8.1 光标介绍 Introduction to cursors
  • 16.8.2 光标属性 'cursor'  The 'cursor' property
  • 16.8.3 光标元素 'cursor'  The 'cursor' element
• 16.9 文档对象模型接口 DOM interfaces

16.1 引言 Introduction

通过利用精图语言中的下列特征可以使精图内容能够进行交互(即, 对用户触发的事件进行响应):SVG content can be interactive (i.e., responsive to user-initiatedevents) by utilizing the following features in the SVG language:

• 用户触发的行动如在指点设备 (例如, 一个鼠标)按下一个按钮便会播放 动画 或执行 脚本 .  User-initiated actions such as button presses on the pointing device (e.g., a mouse) can causeanimations or scripts to execute.
• 当指点设备定位在特定图形元素的上方进行类似于鼠标点击的行动, 用户可以触发其超链接跳到新的网页 (参见 离开精图内容的链接：元素 'a' ) .   The user can initiate hyperlinks to new Web pages (seeLinks out of SVG content: the 'a' element) by actions such as mouse clicks when the pointing device is positioned over particular graphics elements.
• 在很多情况下,这依赖于精图元素 'svg' 上的属性  zoomAndPan 的值和用户代理的特性, 用户可以围绕精图内容进行缩放和平移.   In many cases, depending on the value of thezoomAndPan attribute on the 'svg' element and on the characteristics of the user agent, users are able to zoom into and pan around SVG content.
• 用户移动指点设备可以使得用于显示指点设备的当前位置的 光标 发生改变.   User movements of the pointing device can cause changes to the cursor that shows the current position of the pointing device.

本章将描述下列内容:This chapter describes:

• 关于 事件 的信息, 包括在何种情况下事件将被触发   information about events, including under which circumstances events are triggered
• 如何指定一给定的文档是否可以进行缩放与平移  how to indicate whether a given document can bezoomed and panned
• 如何指定使用哪一光标  how to specify whichcursors to use

相关的信息可以在其它章节中找到:Related information can be found in otherchapters:

• 超链接在链接中讨论 hyperlinks are discussed inLinks
• 脚本和事件属性在 Scripting中讨论 scripting and event attributes are discussed in Scripting
• 精图与DOM2 事件的关系在 与 DOM2 事件模型的关系中讨论 SVG's relationship to DOM2 events is discussed in Relationship with DOM2 event model
• 动画在动画中讨论 animation is discussed inAnimation

16.2 所支持事件的完全列表 Complete list of supported events

事件影响精图的下列方面: The following aspects of SVG are affected byevents:

• 使用 精图文档对象模型 (DOM), 可以将脚本注册为 DOM2 事件监听者 使得当一给定的事件出现时便可调用此脚本.    Using SVG Document Object Model (DOM), a script can register DOM2 event listeners so that script can be invoked when a given event occurs.
• 精图在选定的元素中包含 事件属性 当给定的元素相联系的事件出现时所定义的脚本将被执行.    SVG includes event attributes on selected elements which define script that can be executed when a given event occurs in association with the given element.
• 精图的动画元素 可以基于事件进行启动和终止.  SVG'sanimation elements can be defined to begin or end based on events.

下列表格列出了所有精图能识别和支持的事件. 第一列的 事件名 为用于精图的动画元素定义的用于启动或终止动画的事件的名字 . 第三列DOM2 名用来定义DOM2事件监听者. 第五列事件属性名 包含与精图语言中的元素相关的事件属性 对应的名字.    The following table lists all of the eventswhich are recognized and supported in SVG. TheEvent name in the first column is thename to use within SVG's animationelements to define the events which can start or end animations. TheDOM2 name in thethird column is the name to use when defining DOM2event listeners. The Event attribute name in the fifth column contains thecorresponding name of theeventattributes that can be attached to elements in the SVG language.

与在 DOM2键事件不一样, 精图规范不提供键事件集. 设计用于键盘输入装置的一套事件将包含在DOM 和精图规范的以后版本内.    As in DOM2Key events, the SVG specification does not provide a key event set. Anevent set designed for use with keyboard input devices will be included in alater version of the DOM and SVG specifications.

事件SVGLoad仅分派给应用此事件的元素; 并不分派给元素的上级. 例如, 若图片元素'image' 和它的上级分组元素'g' 都有 对事件 SVGLoad 的监听器, 当图片元素'image' 被加载时, 只有图片元素的监听器被调用. (分组元素'g' 的事件监听器仅在分组元素'g' 本身被加载时才会被调用.)  ASVGLoadevent is dispatched only to the element to which the event applies; it is notdispatched to its ancestors. For example, if an'image' element and its parent 'g' element both have event listeners for SVGLoad events,when the'image' element has been loaded, only its eventlistener will be invoked. (The'g' element's event listener will indeed getinvoked, but the invocation will happen when the'g' itself has been loaded.)

传给各种DOM2事件监听器的参数的细节在DOM2规范中可以找到. 而其它类型的事件,传给事件监听器的参数在此规范的其它地方进行描述.Details on the parameters passed to event listeners for the eventtypes from DOM2 can be found in the DOM2 specification. For other event types,the parameters passed to event listeners are described elsewhere in thisspecification.

16.3 用户界面事件 User interface events

如果文档用在支持交互性的用户代理上, 作者通常定义精图文档对用户界面事件作出反应.这当中可能出现的用户事件集为指点事件, 键盘事件和文档事件. On user agents which support interactivity, it is common forauthors to define SVG documents such that they are responsive to user interfaceevents. Among the set of possible user events arepointer events,keyboard events, and document events.

作为对用户界面事件的响应, 作者可以启动动画,执行超链接到另一网页, 高亮部分文档(例如, 改变指针下图形元素的颜色),触发"翻身" (例如, 使某些以前不可见的图形元素显示在指针附近) 或执行与远程数据库通讯的脚本.In response to user interface (UI) events, the author might startan animation, perform a hyperlink to another Web page, highlight part of thedocument (e.g., change the color of the graphics elements which are under thepointer), initiate a "roll-over" (e.g., cause some previously hiddengraphics elements to appear near the pointer) or launch a script whichcommunicates with a remote database.

所有与用户界面事件相关的特征通过事件属性 或动画作为精图语言的一部分加以定义,  对应于事件冒泡模型的事件模型在 DOM2 [DOM2-EVBUBBLE]中描述. DOM2 [DOM2-EVCAPTURE]的事件捕获模型仅由DOM 方法调用所建立.    For all UIevent-related features defined as part of the SVG language viaeventattributes or animation,the event model corresponds to the event bubbling model described in DOM2 [DOM2-EVBUBBLE].Theevent capturemodel from DOM2 [DOM2-EVCAPTURE]can only be established from DOM method calls.

16.4 指点事件 Pointer events

用户在指点设备上执行操作所出现的用户界面事件称为指点事件.   User interfaceevents that occur because of user actions performed on a pointer device arecalled pointer events.

多数系统支持指点装置如鼠标或轨迹球. 对于使用鼠标的系统指点事件由鼠标移动和鼠标点击这样的行动组成. 对于使用其它指点设备的系统, 常常指点设备通过提供等价的用户行动的机制 (如按下一按钮等价于鼠标点击) 仿真鼠标的行为.   Many systems support pointer devices such as a mouseor trackball. On systems which use a mouse, pointer events consist of actionssuch as mouse movements and mouse clicks. On systems with a different pointerdevice, the pointing device often emulates the behavior of the mouse byproviding a mechanism for equivalent user actions, such as a button to presswhich is equivalent to a mouse click.

对于每一个指点事件, 精图用户代理确定给定事件的目标元素. 目标元素是最顶层的图形元素，在事件发生时它的图形内容在指针的下面 .(参见属性'pointer-events' 关于如何确定一个元素的图形内容是否在指针的下面, 从而在何种情况下图形元素可以作为指点事件的目标元素.)  当一个元素不被显示时(即, 此元素或者它的上级之一的属性'display'  的值为 none), 则它不能成为指点事件的目标.   For each pointer event, the SVG user agent determinesthetarget elementof a given pointer event. The target element is the topmost graphics elementwhose relevant graphical content is under the pointer at the time of the event.(See property'pointer-events' for a description of how todetermine whether an element's relevant graphical content is under the pointer,and thus in which circumstances that graphic element can be the target elementfor a pointer event.) When an element is not displayed (i.e., when the 'display' property on that element or one of itsancestors has a value of none), that element cannotbe the target of pointer events.

根据下列情形事件最初分派给目标元素或目标元素的上级或不分派: The event is eitherinitially dispatched to the target element, to one of the target element's ancestors, ornot dispatched, depending on the following:

• 如果无图形元素的相关图形内容在指针下面 (即, 无目标元素),则不分派此事件.   If there are no graphics elements whose relevant graphics content is under the pointer (i.e., there is no target element), the event is not dispatched.
• 否则, 如果有一个目标元素的上级指定了对此事件进行捕获[DOM2-EVCAPTURE] 的事件处理器, 则此事件分派给此上级元素.   Otherwise, there is a target element. If there is an ancestor of the target element which has specified an event handler with event capturing [DOM2-EVCAPTURE] for the given event, then the event is dispatched to that ancestor element.
• 否则, 如果目标元素有一个此事件的合适的事件处理器, 此事件分派给此目标函数.  Otherwise, if the target element has an appropriate event handler for the given event, the event is dispatched to the target element.
• 否则, 对目标元素的上级 (最先从最直接的上级开始)进行检查看是否有适当的事件处理器. 如果某一上级有适当的事件处理器,则将此事件分派给此上级元素.  Otherwise, each ancestor of the target element (starting with its immediate parent) is checked to see if it has an appropriate event handler. If an ancestor is found with an appropriate event handler, the event is dispatched to that ancestor element.
• 否则, 事件被丢弃.  Otherwise, the event is discarded.

当事件冒泡 [DOM2-EVBUBBLE] 启用时, 泡泡将通过目标元素的所有直接上级. 下级元素在上级元素之前收到事件. 于是, 如果一路径元素'path' 为一分组元素 'g' 的下级并且它们都有对点击click 事件的事件处理器, 那么此事件将在分派给分组元素'g' 之前分派给路径元素'path' .     When eventbubbling [DOM2-EVBUBBLE]is active, bubbling occurs up to all direct ancestors of the target element.Descendant elements receive events before their ancestors. Thus, if a 'path' element is a child of a 'g' element and they both have event listenersfor clickevents, then the event will be dispatched to the'path' element before the 'g' element.

当事件捕获 [DOM2-EVCAPTURE] 启用时, 上级元素在下级元素之前收到事件.  When eventcapturing [DOM2-EVCAPTURE]is active, ancestor elements receive events before their descendants.

在一个事件初步分派给一个特定的元素之后, 除非采取一个适当的行动阻止进一步的处理 (例如, 通过调用DOM 方法调用preventCapture() 或者 preventBubble() ), 事件将被传给此元素的上级  (在事件冒泡情况下) 或者此元素的下级  (在事件捕获情况下) 的适当的事件处理器(如果有的话)作进一步的处理.     After an event is initially dispatched toa particular element, unless an appropriate action has been taken to preventfurther processing (e.g., by invoking the preventCapture()or preventBubble() DOM method call), the eventwill be passed to the appropriate event handlers (if any) for that element'sancestors (in the case of event bubbling) or that element's descendants (in thecase of event capture) for further processing.

16.5 用户界面事件的处理顺序 Processing order for user interface events

用户界面事件的处理顺序如下: The processing order for user interfaceevents is as follows:

• 事件处理器指派到在指针下顶端的图形元素(和通过潜在的事件冒泡[DOM2-EVBUBBLE]此图形元素的各个上级 ) 先收到此事件. 如果活动的事件处理器不采取显式的行动(例如, 调用 DOM方法 preventDefault()  )阻止此事件的进一步处理, 则此事件将传给:  Event handlers assigned to the topmost graphics element under the pointer (and the various ancestors of that graphics element via potential event bubbling [DOM2-EVBUBBLE]) receive the event first. If none of the activation event handlers take an explicit action to prevent further processing of the given event (e.g., by invoking the preventDefault() DOM method), then the event is passed on for:
• 任何相关的动态伪类的处理 (即, :hover, :active 和 :focus)[CSS2-DYNPSEUDO],然后此事件将传给:  Processing of any relevant dynamic pseudo-classes (i.e., :hover, :active and :focus) [CSS2-DYNPSEUDO], after which the event is passed on for:
• (对于那些求助于超链接的用户界面事件, 象在有些用户代理上的鼠标点击) 链接 处理. 如果对用户界面事件以超链接的方式进行响应, 超链接通常会阻止进一步对事件进行处理 (例如, 常常, 链接会定义一个跳到另一网页的超链接). 如果此链接不阻止此事件的进一步处理, 则此事件将传给:     (For those user interface events which invoke hyperlinks, such as mouse clicks in some user agents)Link processing. If a hyperlink is invoked in response to a user interface event, the hyperlink typically will disable further activation event processing (e.g., often, the link will define a hyperlink to another Web page). If link processing does not disable further processing of the given event, then the event is passed on for:
• (对于那些可以选择文本的用户界面事件, 象在文本元素 'text' 上的鼠标点击和拖拽) 文本选取 处理. 当一个文本选取操作出现时, 通常会阻止此事件的进一步处理; 否则, 此事件将传给:     (For those user interface events which can select text, such as mouse clicks and drags on'text' elements) Text selection processing. When a text selection operation occurs, typically it will disable further processing of the given event; otherwise, the event is passed on for:
• 文档级事件的处理, 如用户代理工具允许对精图文档片段进行放大和平移.    Document-wide event processing, such as user agent facilities to allow zooming and panning of an SVG document fragment.

16.6 指点事件属性 'pointer-events'   The 'pointer-events'property

在不同的情况下, 作者也许要控制在何种情形下特定的图形元素能够成为指针事件的目标. 例如, 作者也许想让只有指针掠过一给定的形状的边缘时给定的元素才能接收指针事件. 在其它情形下, 作者也许要使得在所有情形下某一元素忽略指针事件使得此元素下面的图形元素成为指针事件的目标.    In different circumstances, authors may want tocontrol under what circumstances particular graphic elements can become thetarget of pointer events. For example, the author might want a given element toreceive pointer events only when the pointer is over the stroked perimeter of agiven shape. In other cases, the author might want a given element to ignorepointer events under all circumstances so that graphical elements underneaththe given element will become the target of pointer events.

例如, 假设一圆具有红色的描边 'stroke'   (即, 其轮廓为红色) 并且其填充 'fill' 为 none (即, 其内部不被绘制) 被直接渲染在一具有蓝色blue填充'fill' 的长方形上方 . 作者也许想使当指针掠过圆的边缘时圆为指针事件的目标. 当指针掠过圆的内部时作者也许想要在下面的长方形成为指针事件的目标元素.   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. Theauthor might want the circle to be the target of pointer events only when thepointer is over the perimeter of the circle. When the pointer is over theinterior of the circle, the author might want the underlying rectangle to bethe target element of pointer events.

指针事件属性 'pointer-events' 说明在何种情形下一给定的图形元素能够成为一指针事件的目标. 它影响下列情形的处理:   The 'pointer-events'property specifies under what circumstances a given graphics element can be thetarget element for a pointer event. It affects the circumstances under whichthe following are processed:

• 用户界面事件如鼠标点击 user interface events such as mouse clicks
• 动态伪类 (即, :hover, :active 和 :focus)[CSS2-DYNPSEUDO]   dynamic pseudo-classes (i.e., :hover, :active and :focus) [CSS2-DYNPSEUDO]
• 超链接 (参见 离开精图内容的链接：元素 'a' )   hyperlinks (see Links out of SVG content: the 'a' element)

'pointer-events'

visiblePainted

当可见属性 'visibility' 被设置为可见 visible 并且指针掠过一"绘制"区域时给定元素可以成为指针事件的目标元素. 指针掠过一绘制区域是指如果掠过此元素的内部 (即, 填充) 并且填充属性'fill' 设置成一个不为'none'的值或者掠过此元素的边缘(即, 描边) 并且描边属性 'stroke' 设置成一个不为 'none'的值.   The given element can be the target element forpointer 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 theinterior (i.e., fill) of the element and the'fill' property is set to a 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'.

visibleFill

当可见属性 'visibility' 被设置为可见 visible 并且指针掠过此元素的内部 (即, 填充) 时给定元素可以成为指针事件的目标元素. 填充属性 '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. The value of the'fill' property does not effect event processing.

visibleStroke

当可见属性 'visibility' 被设置为可见 visible 并且指针掠过此元素的边缘(即, 描边) 时给定元素可以成为指针事件的目标元素. 描边属性 '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. The value of the'stroke' property does not effect event processing.

visible

当可见属性 'visibility' 被设置为可见 visible 并且指针掠过此元素的内部 (即, 填充) 或此元素的边缘(即, 描边) 时给定元素可以成为指针事件的目标元素. 填充属性'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. The values of the'fill' and 'stroke' do not effect event processing.

painted

当指针掠过一"绘制"区域时给定元素可以成为指针事件的目标元素. 指针掠过一绘制区域是指如果掠过此元素的内部 (即, 填充) 并且填充属性'fill' 设置成一个不为 'none'的值或者掠过此元素的边缘(即, 描边) 并且描边属性'stroke' 设置成一个不为 'none'的值. 可见属性 'visibility' 的值不影响事件的处理. Thegiven element can be the target element for pointer events when the pointer isover a "painted" area. The pointer is over a painted area if it isover the interior (i.e., fill) of the element and the'fill' property is set to a 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'. The value of the 'visibility' property does not effect eventprocessing.

fill

当指针掠过此元素的内部 (即, 填充) 时给定元素可以成为指针事件的目标元素. 填充属性 'fill' 和可见属性 'visibility' 的值不影响事件的处理.  The given element can be the target element for pointer events when the pointeris over the interior (i.e., fill) of the element. The values of the'fill' and 'visibility' properties do not effect eventprocessing.

stroke

当指针掠过此元素的边缘(即, 描边) 时给定元素可以成为指针事件的目标元素. 描边属性 'stroke' 和可见属性 'visibility' 的值不影响事件的处理. The given element can be the target element for pointer events when the pointeris over the perimeter (i.e., stroke) of the element. The values of the'stroke' and 'visibility' properties do not effect eventprocessing.

all

当指针无论是掠过此元素的内部 (即, 填充)还是掠过此元素的边缘(即, 描边) 时给定元素可以成为指针事件的目标元素. 填充属性 'fill' 和描边属性 'stroke' 及可见属性 'visibility' 的值不影响事件的处理. Thegiven element can be the target element for pointer events whenever the pointeris over either the interior (i.e., fill) or the perimeter (i.e., stroke) of theelement. The values of the'fill', 'stroke' and 'visibility' properties do not effect eventprocessing.

none

给定元素不接收指针事件.  The given element does not receive pointer events.

对于文本元素, 触碰检测在字符小室基上进行: hitdetection is performed on a character cell basis:   For textelements, hit detection is performed on a character cell basis:

• 值 visiblePainted 意味着在字符小室内文本串能够接收事件当填充属性 'fill' 设置成一个不为 none 的值或者描边属性 'stroke' 设置成一个不为 none 的值, 并且要求可见属性 'visibility' 被设置为可见 visible .   The value visiblePainted means that the text string can receive events anywhere within the character cell if either the'fill' property is set to a value other than none or the 'stroke' property is set to a value other than none, with the additional requirement that the'visibility' property is set to visible.
• 值 visibleFill, visibleStroke 和 visible 是等价的 意味着在字符小室内文本串能够接收事件如果可见属性 'visibility' 被设置为可见 visible .  填充属性 'fill' 和描边属性 'stroke'  的值不影响事件的处理. 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. The values of the 'fill' and 'stroke' properties do not effect event processing.
• 值 painted 意味着在字符小室内文本串能够接收事件当填充属性 'fill' 设置成一个不为 none 的值或者描边属性 'stroke' 设置成一个不为 none 的值, 可见属性 'visibility' 的值不影响事件的处理.  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. The value of the 'visibility' property does not effect event processing.
• 值 fill, stroke和 all  是等价的意味着在字符小室内文本串能够接收事件. 填充属性 'fill' 和描边属性 'stroke' 及可见属性 'visibility' 的值不影响事件的处理. The values fill, stroke and all are equivalent and indicate that the text string can receive events anywhere within the character cell. The values of the'fill', 'stroke' and 'visibility' properties do not effect event processing.
• 值 none 表明给定的文本不接收指针事件.  The value none indicates that the given text does not receive pointer events.

对于光栅图像, 触碰检测要么在整个图像基上(即, 图像的矩形区域其为图像是否接收事件的决定因素之一) 要么在每个像素基上(即, 在指针下的像素 alpha 值决定图像是否接收此事件)进行:  For raster images, hit detectionis either performed on a whole-image basis (i.e., the rectangular area for theimage is one of the determinants for whether the image receives the event) oron a per-pixel basic (i.e., the alpha values for pixels under the pointer helpdetermine whether the image receives the event):

• 值 visiblePainted 意味着在图像的边界内并且在指针下的像素是不完全透明时图像能够接收事件, 并且要求可见属性 'visibility' 被设置为可见 visible .   The value visiblePainted means that the raster image can receive events anywhere within the bounds of the image if any pixel from the raster image which is under the pointer is not fully transparent, with the additional requirement that the 'visibility' property is set to visible.
• 值 visibleFill, visibleStroke 和 visible 是等价的 意味着在图像的矩形区域内图像能够接收事件如果可见属性 'visibility' 被设置为可见 visible . The values visibleFill, visibleStroke and visible are equivalent and indicate that the image can receive events anywhere within the rectangular area for the image if the'visibility' property is set to visible.
• 值 painted 意味着在图像的边界内并且在指针下的像素是不完全透明时图像能够接收事件, , 可见属性 'visibility' 的值不影响事件的处理.  The value painted means that the raster image can receive events anywhere within the bounds of the image if any pixel from the raster image which is under the pointer is not fully transparent. The value of the'visibility' property does not effect event processing.
• 值 fill, stroke和 all  是等价的意味着在图像的矩形区域内图像能够接收事件. 可见属性 'visibility' 的值不影响事件的处理. The values fill, stroke and all are equivalent and indicate that the image can receive events anywhere within the rectangular area for the image. The value of the'visibility' property does not effect event processing.
• 值 none 表明给定的图像不接收指针事件.  The value none indicates that the image does not receive pointer events.

注意对于光栅图像, 属性 'opacity', 'fill-opacity', 'stroke-opacity', 'fill' 和 'stroke' 的值都不影响事件的处理.  Note that for raster images, the values of properties 'opacity', 'fill-opacity', 'stroke-opacity', 'fill' and 'stroke' do not effect event processing.

16.7放大和平移 Magnification and panning

放大表示一种在精图文档片段上进行的完整一致的变换, 这里放大操作对所有元素按相同比例进行. 放大操作具有在精图文档片段最外层补偿比例和平移变换的效果 (即, 在最外部的精图元素'svg' 的外面).  Magnification represents a complete, uniform transformation on an SVG documentfragment, where the magnify operation scales all graphical elements by the sameamount. A magnify operation has the effect of a supplemental scale andtranslate transformation placed at the outermost level on the SVG documentfragment (i.e., outside the outermost'svg' element).

平移表示一种对用户界面行动作出反应的在精图文档片段上进行的平移变换 .  Panning representsa translation (i.e., a shift) transformation on an SVG document fragment inresponse to a user interface action.

在要求交互能力的用户环境中使用的精图用户代理应支持放大和平移的能力.    SVGuser agents that operate in interaction-capable user environments are requiredto support the ability to magnify and pan.

在精图文档片段的最外部的精图元素 'svg' 具有放大和平移属性 zoomAndPan, 其可能的取值为不能disable 和 放大magnify, 其缺省值为放大magnify.   Theoutermost 'svg' element in an SVG documentfragment has attribute zoomAndPan, which takes thepossible values ofdisableand magnify,with the default being magnify.

如果为不能disable,用户代理不提供放大和平移控制并且不允许用户将在给定的文档片段上进行放大和平移.  If disable,the user agent shall disable any magnification and panning controls and notallow the user to magnify or pan on the given document fragment.

在支持用户交互的环境中, 如果为放大magnify, 用户代理将提供控制允许用户在文档片段上执行 "放大" 操作.  If magnify, inenvironments that support user interactivity, the user agent shall providecontrols to allow the user to perform a "magnify" operation on thedocument fragment.

如果对内部的精图元素'svg' 指定放大和平移属性zoomAndPan , 在内部的精图元素'svg' 对放大和平移属性zoomAndPan的设置在精图用户代理中不起作用.  If a zoomAndPan attribute isassigned to an inner 'svg' element, the zoomAndPan setting on the inner 'svg' element will have no effect on the SVG useragent.

Animatable:no.

16.8 光标 Cursors

16.8.1 光标介绍 Introduction to cursors

一些交互显示环境提供了修改指针的外观(即众所周知的光标) 的能力, 有三种类型的光标可用:    Someinteractive display environments provide the ability to modify the appearanceof the pointer, which is also known as thecursor. Three types of cursors areavailable:

• 标准的内建光标 Standard built-in cursors
• 特定平台的定制光标 Platform-specific custom cursors
• 平台无关的定制光标 Platform-independent custom cursors

光标属性 'cursor' 用来指定将用何种光标. 光标属性'cursor' 可以通过指定特定的关键词例如十字crosshair引用标准的内建光标或者一定制光标. 定制光标是通过引用一个统一资源标识符 <uri> 来指定的, 它可以指向一外部资源例如特定平台的光标文件或者指向一光标元素'cursor' , 这种光标元素可以用来定义平台无关的定制光标 .   The 'cursor' property is used to specify which cursor touse. The 'cursor' property can be used toreference standard built-in cursors by specifying a keyword such ascrosshair or acustom cursor. Custom cursors are referenced via a <uri> and can point toeither an external resource such as a platform-specific cursor file or to a'cursor' element, which can be used to define aplatform-independent cursor.

16.8.2 光标属性'cursor' The 'cursor' property

'cursor'

这一属性设定指点装置显示的光标类型.各值具有下列意义:  This property specifies the type of cursor to be displayed for the pointingdevice. Values have the following meanings:

auto

用户代理根据当前上下文决定显示哪种光标.  The UA determines the cursor to display based on the currentcontext.

crosshair

一个简单的十字型光标 (例如, 用短的直线段构成与符号 "+"相象).   A simple crosshair (e.g., short line segmentsresembling a "+" sign).

default

特定平台的缺省光标. 常常渲染成一个箭头.  The platform-dependent default cursor. Often rendered as anarrow.

pointer

为一表示一链接的指针.  The cursor is a pointer that indicates a link.

move

表明某物将被移动.Indicates something is to be moved.

e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize,w-resize

表示某些边将被移动. 例如,当盒子从东南角开始移动时便使用'se-resize' 光标.Indicate that some edge is to be moved. For example, the'se-resize' cursor is used when the movement starts from the south-east cornerof the box.

text

表明文本被选取. 通常渲染为一I棒.Indicates text that can be selected.Often rendered as an I-bar.

wait

表明程序正忙. 通常渲染为一钟表或沙漏.  Indicates that the program is busy. Often rendered as awatch or hourglass.

help

在光标之下的对象有帮助可用. 通常渲染为一问号或一气球.  Help is available for the object under the cursor. Oftenrendered as a question mark or a balloon.

<uri>

用户代理接收由URI指定的资源所定义的光标 . 如果用户代理不能处理第一个光标, 它便试图处理第二个, 等等. 如果用户代理不能处理所有用户定义的光标, 在列表的末尾它必须使用普通光标.    Theuser agent retrieves the cursor from the resource designated by the URI. If theuser agent cannot handle the first cursor of a list of cursors, it shallattempt to handle the second, etc. If the user agent cannot handle anyuser-defined cursor, it must use the generic cursor at the end of the list.

P { cursor : url("mything.cur"), url("second.csr"), text; }

除了精图用户代理必须支持由光标元素 'cursor'定义的光标外,精图的光标属性'cursor' 与 在 "层叠样式表(CSS) 级别2" 规范 [CSS2]中定义的光标属性'cursor' 是一致的.     The 'cursor'property for SVG is identical to the 'cursor'property defined in the "Cascading Style Sheets (CSS) level 2"specification [CSS2], with theexception that SVG user agents must support cursors defined by the 'cursor' element.

16.8.3 光标元素'cursor'  The 'cursor' element

光标元素 'cursor' 能够用来定义平台无关的定制光标.  定义平台无关的定制光标的一种推荐的方法为先创建一 PNG [PNG01] 图片并并定义光标元素'cursor' 引用此 PNG图片并指定在图片内严格的位置作为指针的位置 (即, 热点).   The 'cursor' element can be used to define aplatform-independent custom cursor. A recommended approach for defining aplatform-independent custom cursor is to create a PNG [PNG01] image and define a 'cursor' element that references the PNG image andidentifies the exact position within the image which is the pointer position(i.e., the hot spot).

之所以 PNG格式被推荐是因为它具有通过alpha 通道支持定义透明蒙版的能力 . 如果不同的图像格式被使用, 这一格式应支持透明蒙版的定义 (两种选择: 提供显式的alpha 通道或使用一种特定的像素颜色来表示透明). 如果能确定一透明蒙版, 则此蒙版定义光标的形状; 否则, 光标为一不透明的矩形. 通常, 其它的像素信息 (例如, R, G 和 B 通道) 定义光标不被蒙掉的部分的颜色. 注意光标至少包含两种颜色使得在大多数背景下是可见的.   The PNG format is recommended because it supports the ability to define a transparencymask via an alpha channel. If a different image format is used, this formatshould support the definition of a transparency mask (two options: provide anexplicit alpha channel or use a particular pixel color to indicatetransparency). If the transparency mask can be determined, the mask defines theshape of the cursor; otherwise, the cursor is an opaque rectangle. Typically,the other pixel information (e.g., the R, G and B channels) defines the colorsfor those parts of the cursor which are not masked out. Note that cursorsusually contain at least two colors so that the cursor can be visible over mostbackgrounds.

<!ELEMENT cursor (%descTitleMetadata;) >

<!ATTLIST cursor

  %stdAttrs;

  %xlinkRefAttrs;

  xlink:href %URI; #REQUIRED

  %testAttrs;

  externalResourcesRequired %Boolean; #IMPLIED

  x %Coordinate; #IMPLIED

  y %Coordinate; #IMPLIED >

属性定义: Attribute definitions:

x = "<coordinate>"

表示被指点的精确位置在光标的坐标系统中的位置的 横坐标.  The x-coordinateof the position in the cursor's coordinate system which represents the preciseposition that is being pointed to.
如果此属性未设置, 其效果相当于设置了此属性的值为"0".  If the attribute is not specified, the effect is as if a value of "0"were specified.
Animatable:yes.

y = "<coordinate>"

表示被指点的精确位置在光标的坐标系统中的位置的 纵坐标. The y-coordinateof the position in the cursor's coordinate system which represents the preciseposition that is being pointed to.
如果此属性未设置, 其效果相当于设置了此属性的值为"0".   If the attribute is not specified, the effect is asif a value of "0" were specified.
Animatable:yes.

xlink:href = "<uri>"

一指向文件或由光标的图片提供的元素的 URI引用 .  A URIreference to the file or element which provides the image of the cursor.
Animatable:yes.

在别处定义的属性:   Attributes defined elsewhere:

%stdAttrs;,%testAttrs;,%xlinkRefAttrs;,externalResourcesRequired.

要求精图用户代理支持作为属性 xlink:href 所引用的PNG 格式的图片. SVG user agents are required to support PNG format images as targets of the xlink:href property.

16.9 文档对象模型接口 DOM interfaces

下列接口定义如下:SVGCursorElement. The following interfaces are defined below:SVGCursorElement.

接口 SVGCursorElement  Interface SVGCursorElement

接口SVGCursorElement对应光标元素'cursor' .   The SVGCursorElementinterface corresponds to the 'cursor' element.

IDL 定义 IDL Definition

interface SVGCursorElement : 

                SVGElement,

                SVGURIReference,

                SVGTests,

                SVGExternalResourcesRequired { 

  readonly attribute SVGAnimatedLength x;

  readonly attribute SVGAnimatedLength y;

};

属性 Attributes

readonly SVGAnimatedLength x

对应于给定的光标元素 'cursor' 的属性 x .  Corresponds to attribute x on the given 'cursor'element.

readonly SVGAnimatedLength y

对应于给定的光标元素 'cursor' 的属性 y .  Corresponds to attribute y on the given 'cursor'element.

previous next   contents   elements   attributes   properties   index

精图规范1.0----16 交互性 Interactivity相关推荐

1. Android切图规范

   Android端切图规范v1.0 1.容器的概念 UI设计师在拿到产品经理的原型图后,应该对每张原型图进行分组分类.     具体的分类方法如下:     1.每一个功能界面对应一个文件夹     2 ...

2. Android端切图规范

   Android端切图规范v1.0 1.容器的概念 UI设计师在拿到产品经理的原型图后,应该对每张原型图进行分组分类. 具体的分类方法如下: 1.每一个功能界面对应一个文件夹 2.对原型图中的界面进行整 ...

3. 点击箭头 切图 html,项目切图规范 css精灵图 css小箭头代码 BFC (Block Formatting Context) 块级格式化上下文...

   项目切图规范 PS常用工具 移动工具 移动工具主要负责图层.选区.等的移动.复制操作. 快捷键:v 抓手工具 快捷键:h 空格 + 鼠标左键拖动,空格键可临时转换为抓手工具. 放大镜工具 放大镜工具可 ...

4. unity3d模型制作规范v1.0 .

   数字模型制作规范 本文提到的所有数字模型制作,全部是用3D MAX建立模型,即使是不同的驱动引擎,对模型的要求基本是相同的.当一个VR模型制作完成时,它所包含的基本内容包括场景尺寸.单位,模型归类塌陷 ...

5. unity3d模型制作规范v1.0

   数字模型制作规范 本文提到的所有数字模型制作,全部是用3D MAX建立模型,即使是不同的驱动引擎,对模型的要求基本是相同的.当一个VR模型制作完成时,它所包含的基本内容包括场景尺寸.单位,模型归类塌陷 ...

6. LoRaWAN 规范 1.0（2~4章）

   目录(?)[-] LoRaWAN 规范 10 24章 声明 LoRaWAN 简介 1 LoRaWAN Classes 22 规范 物理层消息格式 1 上行链路消息 2 下行链路消息 3 接收窗口 31 ...

7. win10安装misql8_Win10下免安装版MySQL8.0.16的安装和配置教程图解

   1.MySQL8.0.16解压 其中dada文件夹和my.ini配置文件是解压后手动加入的,如下图所示 2.新建配置文件my.ini放在D:\Free\mysql-8.0.16-winx64目录下 [ ...

8. mysql8.0.17压缩包安装教程_mysql 8.0.16 压缩包安装配置方法图文教程

   本文为大家分享了mysql 8.0.16 压缩包安装配置方法,供大家参考,具体内容如下 运行环境:windows 10 x64 1.下载zip安装包: mysql8.0 for windows zip ...

9. mysql zip win10安装_mysql 8.0.16 Win10 zip版本安装配置图文教程

   本文为大家分享了mysql 8.0.16  Win10 zip版本安装配置图文教程,供大家参考,具体内容如下 首先去mysql官网下载mysql最新版本 1.选择如图所示 community 2.点击 ...

最新文章

1. 代码生成codegen
2. oracle 优化逻辑读过高,详述逻辑读与arraysize的关系
3. 网络推广——网络推广专员面对网站收录异常要学会多角度分析
4. 怎么写redmine wiki
5. 产品需求文档的10步
6. Python的reshape(-1,1)
7. MySql 中文乱码排查解决方案
8. TopN算法与排行榜
9. Swift傻傻分不清楚系列(五) 字符串和字符
10. 火狐浏览器百度网盘服务器响应,火狐浏览器打不开百度网盘怎么解决？解决百度网盘打不开的步骤分享...
11. java语言注释符号，高级Java开发必看
12. java 服务端 处理跨域_javaweb服务端跨域支持
13. Linux下PHP开启Oracle支持(oci8)
14. PowerPoint优点全体验
15. 编程之美学习之最长子序列的解法
16. 卡分区 shell脚本_分享一个实用脚本--一键获取linux内存、cpu、磁盘IO等信息
17. 文件操作——getc()和putc()函数
18. 从ChargePoint到能链智电，充电服务商的价值创新
19. 【CSDN英雄会】黄帅：安全不是独行侠而是系统性的运维过程
20. 关于迭代速度很快的解决方案

热门文章

1. Python 爬虫数据写入csv文件中文乱码解决以及天眼查爬虫数据写入csv
2. confluence 制作流程图_超好用的流程图绘图工具你还没get吗？
3. vue---lodash的使用
4. 软件测试之第一章 软件测试和测试环境
5. 详解Unity中的粒子系统Particle System (二)
6. Map接口以及那些实现类
7. 神马笔记 版本1.4.0
8. declare 简单用法
9. 搭建SPA项目SPA项目中使用路由嵌套路由
10. 优秀领导者必须具备的4大特质