SVG content can be interactive (i.e., responsive to user-initiated events) by utilizing the following features in the SVG language:
This chapter describes:
Related information can be found in other chapters:
The following aspects of SVG are affected by events:
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.
| Event name | Description | DOM2 name | DOM2 category | Event attribute name |
|---|---|---|---|---|
| focusin | Occurs when an element receives focus, such as when a 'text' becomes selected. | DOMFocusIn | UIEvent | onfocusin |
| focusout | Occurs when an element loses focus, such as when a 'text' becomes unselected. | DOMFocusOut | UIEvent | onfocusout |
| activate | 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). | DOMActivate | UIEvent | onactivate |
| click | 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. |
(same) | MouseEvent | onclick |
| mousedown | Occurs when the pointing device button is pressed over an element. | (same) | MouseEvent | onmousedown |
| mouseup | Occurs when the pointing device button is released over an element. | (same) | MouseEvent | onmouseup |
| mouseover | Occurs when the pointing device is moved onto an element. | (same) | MouseEvent | onmouseover |
| mousemove | Occurs when the pointing device is moved while it is over an element. | (same) | MouseEvent | onmousemove |
| mouseout | Occurs when the pointing device is moved away from an element. | (same) | MouseEvent | onmouseout |
| DOMSubtreeModified | 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.) | (same) | MutationEvent | none |
| DOMNodeInserted | Fired when a node has been added as a child of another node. (The normative definition of this event is the description in the DOM2 specification.) | (same) | MutationEvent | none |
| DOMNodeRemoved | Fired when a node is being removed from another node. (The normative definition of this event is the description in the DOM2 specification.) | (same) | MutationEvent | none |
| DOMNodeRemovedFromDocument | 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.) | (same) | MutationEvent | none |
| DOMNodeInsertedIntoDocument | 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.) | (same) | MutationEvent | none |
| DOMAttrModified | Fired after an attribute has been modified on a node. (The normative definition of this event is the description in the DOM2 specification.) | (same) | MutationEvent | none |
| DOMCharacterDataModified | Fired after CharacterData within a node has been modified but the node itself has not been inserted or deleted. (The normative definition of this event is the description in the DOM2 specification.) | (same) | MutationEvent | none |
| SVGLoad | 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. | (same) | none | onload |
| SVGUnload | Only applicable to outermost 'svg' elements. The unload event occurs when the DOM implementation removes a document from a window or frame. | (same) | none | onunload |
| SVGAbort | The abort event occurs when page loading is stopped before an element has been allowed to load completely. | (same) | none | onabort |
| SVGError | The error event occurs when an element does not load properly or when an error occurs during script execution. | (same) | none | onerror |
| SVGResize | The resize event occurs when a document view is resized. (Only applicable to outermost 'svg' elements.) | (same) | none | onresize |
| SVGScroll | The scroll event occurs when a document view is shifted in X or Y or both, such as when the document view is scrolled or panned. (Only applicable to outermost 'svg' elements.) | (same) | none | onscroll |
| SVGZoom | Occurs when the document changes its zoom level based on user interaction. (Only applicable to outermost 'svg' elements.) | none | none | onzoom |
| beginEvent | Occurs when an animation element begins. For details, see the description of Interface TimeEvent in the SMIL Animation specification. | none | none | onbegin |
| endEvent | Occurs when an animation element ends. For details, see the description of Interface TimeEvent in the SMIL Animation specification. | none | none | onend |
| repeatEvent | 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. | none | none | onrepeat |
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 SVGLoad 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 SVGLoad 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.
On user agents which support interactivity, it is common for authors to define SVG documents 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.
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:
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.
The processing order for user interface events is as follows:
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 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:
| Value: | visiblePainted | visibleFill | visibleStroke |
visible | painted | fill | stroke | all | none | inherit |
| Initial: | visiblePainted |
| Applies to: | graphics elements |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Animatable: | yes |
For text elements, hit detection is performed on a character cell basis:
For raster images, hit detection is either performed on a whole-image basis (i.e., the rectangular area for the image is one of the determinants for whether the image receives the event) or on a per-pixel basic (i.e., the alpha values for pixels under the pointer help determine whether the image receives the event):
Note that for raster images, the values of properties 'opacity', 'fill-opacity', 'stroke-opacity', 'fill' and 'stroke' do not effect event processing.
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).
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 and pan.
The outermost 'svg' element in an SVG document fragment has attribute zoomAndPan, which takes the possible values of disable and magnify, with the default being magnify.
If disable, the user agent shall disable any magnification and panning controls and not allow the user to magnify 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 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.
Animatable: no.
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:
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.
| 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: | container elements and graphics elements |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual, interactive |
| Animatable: | yes |
This property specifies the type of cursor to be displayed for the pointing device. Values have the following meanings:
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.
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 PNG format is recommended because it supports the ability to define a transparency mask via an alpha channel. If a different image format is used, this format should support the definition of a transparency mask (two options: provide an explicit alpha channel or use a particular pixel color to indicate transparency). If the transparency mask can be determined, the mask defines the shape 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 colors for those parts of the cursor which are not masked out. Note that cursors usually contain at least two colors so that the cursor can be visible over most backgrounds.
<!ENTITY % SVG.cursor.element "INCLUDE" >
<![%SVG.cursor.element;[
<!ENTITY % SVG.cursor.content
"( %SVG.Description.class; )*"
>
<!ELEMENT %SVG.cursor.qname; %SVG.cursor.content; >
<!-- end of SVG.cursor.element -->]]>
<!ENTITY % SVG.cursor.attlist "INCLUDE" >
<![%SVG.cursor.attlist;[
<!ATTLIST %SVG.cursor.qname;
%SVG.Core.attrib;
%SVG.Conditional.attrib;
%SVG.XLinkRequired.attrib;
%SVG.External.attrib;
x %Coordinate.datatype; #IMPLIED
y %Coordinate.datatype; #IMPLIED
>
|
Attribute definitions:
SVG user agents are required to support PNG format images as
targets of the xlink:href
property.
The Document Events Attribute Module defines the DocumentEventsAttrs attribute set.
| Collection Name | Attributes in Collection |
|---|---|
| DocumentEventsAttrs | onunload, onabort, onerror, onresize, onscroll, onzoom |
The Graphical Element Events Attribute Module defines the GraphicalElementEventsAttrs attribute set.
| Collection Name | Attributes in Collection |
|---|---|
| GraphicalElementEventsAttrs | onfocusin, onfocusout, onactivate, onclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onload |
The Animation Events Attribute Module defines the AnimEventsAttrs attribute set.
| Collection Name | Attributes in Collection |
|---|---|
| AnimEventsAttrs | onbegin, onend, onrepeat, onload |
| Elements | Attributes | Content Model |
|---|---|---|
| cursor | StdAttrs, xlinkRefAtts, xlink:href, TestAttrs, ExternalResourcesRequiredAttrs, x, y | (DescriptionElements) |
The Cursor Module defines the CursorElements content set.
| Content Set Name | Elements in Content Set |
|---|---|
| CursorElements | cursor |
The Cursor Module defines the CursorPresentationAttrs attribute set.
| Collection Name | Attributes in Collection |
|---|---|
| CursorPresentationAttrs | cursor |
The following interfaces are defined below: SVGCursorElement.
The SVGCursorElement interface corresponds to the 'cursor' element.
interface SVGCursorElement :
SVGElement,
SVGURIReference,
SVGTests,
SVGExternalResourcesRequired {
readonly attribute SVGAnimatedLength x;
readonly attribute SVGAnimatedLength y;
};