The following table lists all of the events which are recognized and supported in SVG.
The Event name in the first column is the name to use within SVG's
animation elements to define the events which
can start or end animations. The DOM2 name in the third column is the name to use
when defining
DOM2 event listeners.
The Event attribute name in the fifth column contains the corresponding name of the
event attributes that can be attached
to elements in the SVG language.

Occurs when an element is activated, for instance,
thru a mouse click or a keypress. A numerical argument
is provided to give an indication of the type of activation that occurs:
1 for a simple activation (e.g. a simple click or Enter),
2 for hyperactivation (for instance a double click or Shift Enter).

Occurs when the pointing device button is clicked over
an element. A click is defined as a mousedown and mouseup over the same screen
location. The sequence of these events is:
mousedown, mouseup, click.
If multiple clicks occur at the same screen location, the sequence repeats
with the detail attribute incrementing with each repetition.

This is a general event for notification of all changes to the document.
It can be used instead of the more specific events listed below.
(The normative definition of this event is the description in the
DOM2 specification.)

Fired when a node is being removed from a document,
either through direct removal of the Node or removal of a subtree in which it is contained.
(The normative definition of this event is the description in the
DOM2 specification.)

Fired when a node is being inserted into a document,
either through direct insertion of the Node or insertion of a subtree in which it is contained.
(The normative definition of this event is the description in the
DOM2 specification.)

The event is triggered at the point at which the user agent has fully
parsed the element and its descendants and is ready to act appropriately
upon that element, such as being ready to render the element to the
target device.
Referenced external resources that are required
must be loaded, parsed and ready to render before the event is triggered.
Optional external resources are not required to be ready for the event to be triggered.

Occurs when an animation element repeats. It is raised
each time the element repeats, after the first iteration.
For details, see the description of Interface TimeEvent in the
SMIL Animation specification.

As in DOM2 Key events,
the SVG specification does not provide a key event set.
An event set designed for use with keyboard input devices will be included in a later version of the DOM
and SVG specifications.

A load
event is dispatched only to the element to which the event applies;
it is not dispatched to its ancestors.
For example, if an 'image'
element and its parent 'g'
element both have event listeners for load
events, when the 'image'
element has been loaded, only its event listener will be invoked. (The
'g'
element's event listener will indeed get invoked, but the invocation
will happen when the 'g'
itself has been loaded.)

Details on the parameters passed to event listeners for the event types from DOM2
can be found in the DOM2 specification. For other event types, the parameters passed
to event listeners are described elsewhere in this specification.

16.3 User interface events

On user agents which support interactivity, it is common for authors
to define SVG document such that they are responsive to user interface
events.
Among the set of possible user events are pointer events,
keyboard events, and document events.

In response to user interface (UI) events, the author might start
an animation, perform a hyperlink to another Web page, highlight part
of the document (e.g., change the color of the graphics elements which
are under the pointer), initiate a "roll-over" (e.g., cause some previously
hidden graphics elements to appear near the pointer) or launch a script
which communicates with a remote database.

For all UI event-related features defined as part of the SVG language
via event attributes
or animation,
the event model corresponds to the event bubbling
model described in DOM2 [DOM2-EVBUBBLE].
The event capture
model from DOM2 [DOM2-EVCAPTURE]
can only be established from DOM method calls.

16.4 Pointer events

User interface events that occur because of user actions performed
on a pointer device are called pointer events.

Many systems support pointer devices such as a mouse or trackball.
On systems which use a mouse, pointer events consist of actions such
as mouse movements and mouse clicks.
On systems with a different pointer device, the pointing device often
emulates the behavior of the mouse by providing a mechanism for equivalent
user actions, such as a button to press which is equivalent to a mouse click.

For each pointer event, the SVG user agent determines the target element
of a given pointer event.
The target element is the topmost graphics element whose relevant graphical content
is under the pointer at the time of the event. (See property
'pointer-events'
for a description of how to determine whether an element's relevant graphical content
is under the pointer, and thus in which circumstances that graphic
element can be the target element for a pointer event.)
When an element is not displayed (i.e., when the
'display' property
on that element or one of its ancestors has a value of none),
that element cannot be the target of pointer events.

The event is either initially dispatched to the target element,
to one of the target element's ancestors, or not 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.

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.

When event bubbling [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 listeners for click
events, then the event will be dispatched to the 'path'
element before the 'g' element.

When event capturing [DOM2-EVCAPTURE]
is active, ancestor elements receive events before their descendants.

After an event is initially dispatched to a particular element, unless
an appropriate action has been taken to prevent further processing
(e.g., by invoking the preventCapture()
or preventBubble()
DOM method call), the event will be passed to the appropriate event
handlers (if any) for that element's ancestors (in the case of event
bubbling) or that element's descendants (in the case of event capture)
for further processing.

16.5 Processing order for user interface events

The processing order for user interface events is as follows:

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:

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:

(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 The 'pointer-events' property

In different circumstances, authors may want to control under what
circumstances particular graphic elements can become the target of
pointer events. For example, the author might want a given element
to receive pointer events only when the pointer is over the stroked perimeter
of a given shape. In other cases, the author might want a given element
to ignore pointer events under all circumstances so that graphical elements underneath
the given element will become the target of pointer events.

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. The author might want the circle to
to be the target of pointer events only when the pointer is over the perimeter of the circle.
When the pointer is over the interior of the circle, the author might want the
underlying rectangle to be the target element of pointer events.

The 'pointer-events'
property specifies under what circumstances a given graphics element
can be the target element for a pointer event. It affects the circumstances
under which the following are processed:

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 a "painted" area.
The pointer is over a painted area if it is over 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'.

visibleFill

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

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

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

The given element can be the target element for pointer events
when the pointer is over
a "painted" area.
The pointer is over a painted area if it is over 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 event processing.

fill

The given element can be the target element for pointer events
when the pointer is over
the interior (i.e., fill) of the element.
The values of the 'fill'
and 'visibility'
properties do not effect event processing.

stroke

The given element can be the target element for pointer events
when the pointer is over
the perimeter (i.e., stroke) of the element.
The values of the 'stroke'
and 'visibility'
properties do not effect event processing.

all

The given element can be the target element for pointer events
whenever the pointer is over either the interior (i.e., fill) or the
perimeter (i.e., stroke) of the element.
The values of the 'fill',
'stroke'
and 'visibility'
properties do not effect event processing.

none

The given element does not receive pointer events.

For text elements, hit detection is performed on a character cell
basis.
The values visiblePainted,
visibleFill,
visibleStroke
and visibleFillStroke
are all defined to be equivalent to the value visible,
and the values painted,
fill,
stroke
and fillStroke
are all defined to be equivalent to the value all.

For raster elements, hit detection can be defined to be dependent
on whether the pixel under the pointer is fully transparent.
For any of the values visiblePainted,
visibleFill,
visibleStroke
and visibleFillStroke,
the raster element receives the event if the 'visibility'
property is set to visible
and the pixel under the pointer is not fully transparent.
For a value of visible,
the raster element receives the event if the 'visibility'
property is set to visible
even if the pixel under the pointer is fully transparent.
For any of the values painted,
fill,
stroke
and fillStroke,
the raster element receives the event if the pixel under the pointer
is not fully transparent, no matter what the value is for the 'visibility'
property.
For a value of all,
the raster element receives the event even if the pixel under the pointer
is fully transparent, no matter what the value is for the 'visibility'
property.

16.7 Magnification, zooming and panning

Magnification represents a complete, uniform transformation on an
SVG document fragment, where the magnify operation scales all graphical
elements by the same amount.
A magnify operation has the effect of a supplemental scale and translate
transformation placed at the outermost level on the SVG document fragment
(i.e., outside the outermost
'svg' element).

Zooming represents a (potentially non-uniform) scale transformation
on an SVG document fragment in response to a user interface action.
All elements which are specified in user coordinates will scale uniformly,
but elements which use unit identifiers
to define coordinates or lengths may be transformed differently.
A zoom operation has the effect of a supplemental scale and translate
transformation inserted into the transformation hierarchy between the
outermost 'svg'
element and its children, as if an extra
'g'
element enclosed all of the children and that
'g'
element specified a transformation to achieve the desired zooming effect.

Panning represents a translation (i.e., a shift) transformation on
an SVG document fragment in response to a user interface action.

SVG user agents that operate in interaction-capable user environments
are required to support the ability to magnify, zoom and pan.

The outermost 'svg'
element in an SVG document fragment has attribute zoomAndPan,
which takes the possible values of disable, magnify and
zoom,
with the default being magnify.

If disable, the user agent shall disable any zooming, magnification and panning
controls and not allow
the user to magnify, zoom or pan on the given document fragment.

If magnify,
in environments that support user interactivity,
the user agent shall provide controls to allow the user to perform a
"magnify" operation on the document fragment.

If zoom,
in environments that support user interactivity,
the user agent shall provide controls to allow the user to perform a
"zoom" operation on the document fragment.

If a zoomAndPan
attribute is assigned to an inner 'svg'
element, the zoomAndPan
setting on the inner 'svg'
element will have no effect on the SVG user agent.

16.8 Cursors

16.8.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.
Three types of cursors are available:

Standard built-in cursors

Platform-specific custom cursors

Platform-independent custom cursors

The 'cursor'
property is used to specify which cursor to use.
The 'cursor'
property can be used to reference standard built-in cursors by specifying
a keyword such as crosshair
or a custom cursor.
Custom cursors are referenced via a <uri> and can point to either
an external resource such as a platform-specific cursor file or to
a 'cursor'
element, which can be used to define a platform-independent cursor.

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 can be selected.
Often rendered as an I-bar.

wait

Indicates that the program is busy.
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 shall 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.

16.8.3 The 'cursor' element

The 'cursor'
element can be used to define a platform-independent custom cursor.
A recommended approach for defining a platform-independent custom cursor
is to create a PNG [PNG01]
image and define a 'cursor'
element that references the PNG image and identifies the exact position
within the image which is the pointer position (i.e., the hot spot).

The x-coordinate
of the position in the cursor's coordinate system which represents
the precise position that is being pointed to.
If the attribute is not specified, the effect is as if a value of "0" were specified.Animatable: yes.

The y-coordinate
of the position in the cursor's coordinate system which represents
the precise position that is being pointed to.
If the attribute is not specified, the effect is as if a value of "0" were specified.Animatable: yes.