15 Interactivity



15.1 Introduction

(Introduction to the various flavors of interactivity in SVG, zoom and pan of drawings, event handlers such as onclick in JavaScript, event-driven animations, hyperlinks and cursors.)

15.2 Zoom and pan control: the allowZoomAndPan attribute on the <svg> element

The outermost <svg> element in an SVG document can have the optional attribute allowZoomAndPan, which takes the possible values of trueand false, with the default being true. If true, the user agent should allow the user to zoom in, zoom out and pan around the given document. If false, the user agent should not allow the user to zoom and pan on the given document. If a allowZoomAndPan attribute is assigned to an inner <svg> element, the allowZoomAndPan setting on the inner <svg> element will be ignored.

15.3 Cursors

15.3.1 Introduction to cursors

Some interactive display environments provide the ability to modify the appearance of the pointer, which is also known as the cursor. Two types of cursors are available:

The 'cursor' property is used to specify which cursor to use. Custom cursors are defined with a <cursor> element.

15.3.2 The 'cursor' property

Value:  [ [<uri> ,]* [ auto | crosshair | default | pointer | move|
e-resize | ne-resize | nw-resize | n-resize |
se-resize | sw-resize | s-resize | w-resize|
text | wait | help ] ] | inherit
Initial:  auto
Applies to:  all elements
Inherited:  yes
Percentages:  N/A
Media:  visual, interactive

This property specifies the type of cursor to be displayed for the pointing device. Values have the following meanings:

The UA determines the cursor to display based on the current context.
A simple crosshair (e.g., short line segments resembling a "+" sign).
The platform-dependent default cursor. Often rendered as an arrow.
The cursor is a pointer that indicates a link.
Indicates something is to be moved.
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-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 corner of the box.
Indicates text that may be selected. Often rendered as an I-bar.
Indicates that the program is busy and the user should wait. Often rendered as a watch or hourglass.
Help is available for the object under the cursor. Often rendered as a question mark or a balloon.
The user agent retrieves the cursor from the resource designated by the URI. If the user agent cannot handle the first cursor of a list of cursors, it should attempt to handle the second, etc. If the user agent cannot handle any user-defined cursor, it must use the generic cursor at the end of the list.


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

The 'cursor' property for SVG is identical to the 'cursor' property defined in the "Cascading Style Sheets (CSS) level 2" specification [CSS2], with the exception that SVG user agents must support cursors defined by the <cursor> element.

15.3.3 The <cursor> element

<!ELEMENT cursor (desc?,title?) >
<!ATTLIST cursor
  system-required CDATA #IMPLIED
  x CDATA "0"
  y CDATA "0"
  xmlns:xlink CDATA #FIXED "http://www.w3.org/XML/XLink/0.9"
  xlink:type (simple|extended|locator|arc) #FIXED "simple" 
  xlink:role CDATA #IMPLIED
  xlink:title CDATA #IMPLIED
  xlink:show (new|parsed|replace) #FIXED 'parsed'
  xlink:actuate (user|auto) #FIXED 'auto'
  xlink:href CDATA #REQUIRED >

Attribute definitions:

x = "x-coordinate"
The x-coordinate of the position in the cursor's coordinate system which represents the precise position that is being pointed to.
y = "y-coordinate"
The y-coordinate of the position in the cursor's coordinate system which represents the precise position that is being pointed to.
href = "uri-reference"
A URI reference to the file or element which provides the image of the cursor.

Attributes defined elsewhere:
id, system-required, xmlns:xlink, xlink:type, xlink:role, xlink:title, xlink:show, xlink:actuate.

SVG user agents are required to support PNG format images as targets of the xlink:href property.