15 Interactivity

Contents

• 15.1 Introduction
• 15.2 Zoom and pan control: the allowZoomAndPan attribute on the <svg> element
• 15.3 Cursors
  • 15.3.1 Introduction to cursors
  • 15.3.2 The 'cursor' property
  • 15.3.3 The <cursor> element

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:

• Standard built-in cursors
• Custom cursors

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

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

auto

The UA determines the cursor to display based on the current context.

crosshair

A simple crosshair (e.g., short line segments resembling a "+" sign).

default

The platform-dependent default cursor. Often rendered as an arrow.

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

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.

text

Indicates text that may be selected. Often rendered as an I-bar.

wait

Indicates that the program is busy and the user should wait. Often rendered as a watch or hourglass.

help

Help is available for the object under the cursor. Often rendered as a question mark or a balloon.

<uri>

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
  id ID #IMPLIED
  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 >

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