previous   next   contents   properties   index  

14 Interactivity


Contents


 

14.1 Links: the <a> element

SVG provides an <a> element, analogous to like HTML's <a> element, to indicate hyperlinks; those parts of the drawing which when clicked on will cause the current browser frame to be replaced by the contents of the URL specified in the href attribute.

The <a> element uses Xlink. (Note that the XLink specification is currently under development and is subject to change. The SVG working group will track and rationalize with XLink as it evolves.)

The following is a valid example of a hyperlink attached to a path (which in this case draws a triangle):

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG July 1999//EN" 
  "http://www.w3.org/Graphics/SVG/svg-19990730.dtd">
<svg width="4in" height="3in">
  <desc>This valid svg document draws a triangle which is a hyperlink
  </desc>
  <a xlink:href="http://www.w3.org">
    <path d="M 0 0 L 200 0 L 100 200 z"/>
  </a>
</svg>

Download this example

This is the well-formed equivalent example:

<?xml version="1.0" standalone="yes"?>
<svg width="4in" height="3in"
 xmlns = 'http://www.w3.org/Graphics/SVG/svg-19990730.dtd'>
  <desc>This well formed svg document draws a triangle which is a hyperlink
  </desc>
  <a xmlns:xlink="http://www.w3.org/XML/XLink/0.9" 
     xlink:type="simple" xlink:show="replace" xlink:actuate="user" 
     xlink:href="http://www.w3.org">
    <path d="M 0 0 L 200 0 L 100 200 z"/>
  </a>
</svg>

Download this example

In both examples, if the path is clicked on, then the current browser frame will be replaced by the W3C home page.
  
<!ELEMENT a (defs?,desc?,title?,
                  (path|text|rect|circle|ellipse|line|polyline|polygon|
                   use|image|svg|g|switch|a)*)>
<!ATTLIST a
  id ID #IMPLIED
  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 'replace'
  xlink:actuate (user|auto) #FIXED 'user'
  xlink:href CDATA #REQUIRED >

xmlns [:prefix] = "resource-name"
Standard XML attribute for identifying an XML namespace. This attribute makes the XLink [XLink] namespace available to the current element. Refer to the "Namespaces in XML" Recommendation [XML-NS].
xlink:type = 'simple'
Identifies the type of XLink being used. For hyperlinks in SVG, only simple links are available. Refer to the "XML Linking Language (XLink)" [XLink].
xlink:role = '<string>'
A generic string used to describe the function of the link's content. Refer to the "XML Linking Language (XLink)" [XLink].
xlink:title = '<string>'
Human-readable text describing the link. Refer to the "XML Linking Language (XLink)" [XLink].
xlink:show = 'replace'
Indicates that upon activation of the link the referenced document should replace the entire contents of the current document. Refer to the "XML Linking Language (XLink)" [XLink].
xlink:actuate = 'user'
Indicates that the contents of the referenced object are incorporated into the current document upon user action. Refer to the "XML Linking Language (XLink)" [XLink].
xlink:href = "<URI-reference>"
The location of the referenced object, expressed as a <URI-reference>. Refer to the "XML Linking Language (XLink)" [XLink].

14.2 Event Handling

Any <g>, <image>, <path>, <text> or vector graphic shape (such as a <rect>) can be assigned any of the following standard HTML event handlers:

Mouse Events

Keyboard Events

State Change Events

Additionally, SVG's scripting engine needs to have the altKey, ctrlKey and shiftKey properties available.

See Scripting.

14.3 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.