--- a/master/interact.html Thu May 17 14:43:30 2012 +1000
+++ b/master/interact.html Thu May 17 15:06:41 2012 +1000
@@ -16,158 +16,126 @@
<h2 id="Introduction">Introduction</h2>
- <p>SVG content can be interactive (i.e., responsive to
- user-initiated events) by utilizing the following features in
- the SVG language:</p>
- <ul>
- <li>User-initiated actions such as button presses on the
- pointing device (e.g., a mouse) can cause <a
- href="animate.html">animations</a> or <a
- href="script.html">scripts</a> to execute.</li>
- <li>The user can initiate hyperlinks to new Web pages (see <a
- href="linking.html#Links">Links out of SVG content: the <span
- class="element-name">'a'</span> element</a>) by actions such
- as mouse clicks when the pointing device is positioned over
- particular graphics elements.</li>
- <li>In many cases, depending on the value of the <a>'zoomAndPan'</a>
- attribute on the <a>'svg'</a> element and on the
- characteristics of the user agent, users are able to zoom
- into and pan around SVG content.</li>
- <li>User movements of the pointing device can cause changes
- to the <a href="interact.html#Cursors">cursor</a> that shows
- the current position of the pointing device.</li>
- </ul>
- <p>This chapter describes:</p>
- <ul>
- <li>information about <a
- href="interact.html#SVGEvents">events</a>, including under
- which circumstances events are triggered</li>
- <li>how to indicate whether a given document can be <a
- href="interact.html#EnableZoomAndPanControls">zoomed and
- panned</a></li>
- <li>how to specify which <a
- href="interact.html#Cursors">cursors</a> to use</li>
- </ul>
- <p>Related information can be found in other chapters:</p>
- <ul>
- <li>hyperlinks are discussed in <a
- href="linking.html">Links</a></li>
- <li>scripting and event attributes are discussed in <a
- href="script.html">Scripting</a></li>
- <li>SVG's relationship to DOM2 events is discussed in <a
- href="svgdom.html#RelationshipWithDOM2Events">Relationship
- with DOM2 event model</a></li>
- <li>animation is discussed in <a
- href="animate.html">Animation</a></li>
- </ul>
+<p>SVG content can be interactive (i.e., responsive to
+user-initiated events) by utilizing the following features in
+the SVG language:</p>
+
+<ul>
+ <li>User-initiated actions such as button presses on the
+ pointing device (e.g., a mouse) can cause <a href="animate.html">animations</a>
+ or <a href="script.html">scripts</a> to execute.</li>
+
+ <li>The user can initiate hyperlinks to new Web pages (see
+ <a href="linking.html#Links">Links out of SVG content: the
+ <span class="element-name">'a'</span> element</a>) by actions such
+ as mouse clicks when the pointing device is positioned over
+ particular graphics elements.</li>
+
+ <li>In many cases, depending on the value of the <a>'zoomAndPan'</a>
+ attribute on the <a>'svg'</a> element and on the
+ characteristics of the user agent, users are able to zoom
+ into and pan around SVG content.</li>
+
+ <li>User movements of the pointing device can cause changes
+ to the <a href="interact.html#Cursors">cursor</a> that shows
+ the current position of the pointing device.</li>
+</ul>
+
+<p>This chapter describes:</p>
+
+<ul>
+ <li>information about <a href="interact.html#SVGEvents">events</a>,
+ including under which circumstances events are triggered</li>
+
+ <li>how to indicate whether a given document can be
+ <a href="interact.html#EnableZoomAndPanControls">zoomed and panned</a></li>
+
+ <li>how to specify which <a href="interact.html#Cursors">cursors</a> to use</li>
+</ul>
+
+<p>Related information can be found in other chapters:</p>
+
+<ul>
+ <li>hyperlinks are discussed in <a href="linking.html">Links</a></li>
+
+ <li>scripting and event attributes are discussed in <a href="script.html">Scripting</a></li>
+
+ <li>SVG's relationship to DOM2 events is discussed in
+ <a href="svgdom.html#RelationshipWithDOM2Events">Relationship with DOM2 event model</a></li>
+
+ <li>animation is discussed in <a href="animate.html">Animation</a></li>
+</ul>
<h2 id="SVGEvents">Complete list of supported events</h2>
- <div class="annotation">
- <p>
- SVG2 Requirement: Anchor events
- </p>
- <p>
- Resolution: SVG 2 will consider adding HTML document wide events (including hashchange) apply to SVG documents when they make sense
- </p>
- <p>
- <a href="http://www.w3.org/2011/12/22-svg-irc#T21-17-25">22 December 2011 SVG WG telcon</a>.
- </p>
- <p>
- Purpose: Allow authors to use the same set of event listener attributes on a root SVG element that they can on an HTML body or root element
- </p>
- <p>
- Owner: Cameron (ACTION-3278)
- </p>
- </div>
-
- <div class="annotation">
- <p>
- SVG2 Requirement: Have event listener attributes on an appropriate interface
- </p>
- <p>
- Resolution: SVG2 will move all events listener attributes to Element, in accordance with the similar move in HTML
- </p>
- <p>
- <a href="http://www.w3.org/2011/07/27-svg-minutes.html#item03">Seattle F2F 2011 Day 1</a>.
- </p>
- <p>
- Purpose: Alignment with HTML
- </p>
- <p>
- Owner: Cameron (ACTION-3283)
- </p>
- </div>
+<div class="annotation">
+ <p>SVG2 Requirement: Anchor events</p>
+ <p>Resolution: SVG 2 will consider adding HTML document wide events (including hashchange) apply to SVG documents when they make sense</p>
+ <p><a href="http://www.w3.org/2011/12/22-svg-irc#T21-17-25">22 December 2011 SVG WG telcon</a>.</p>
+ <p>Purpose: Allow authors to use the same set of event listener attributes on a root SVG element that they can on an HTML body or root element</p>
+ <p>Owner: Cameron (ACTION-3278)</p>
+</div>
- <div class="annotation">
- <p>
- SVG2 Requirement: Introduce evt as an alias to event in event handlers
- </p>
- <p>
- Resolution: We decide to resolve ISSUE-2176 by introducing evt as an alias to event in event handlers
- </p>
- <p>
- <a href="http://www.w3.org/2011/07/27-svg-minutes.html#item15">Seattle F2F 2011 Day 1</a>.
- </p>
- <p>
- Purpose: Alignment with HTML
- </p>
- <p>
- Owner: Cameron (ACTION-3093)
- </p>
- </div>
-
- <div class="annotation">
- <p>
- SVG2 Requirement: Support drag & drop functionality
- </p>
- <p>
- Resolution: SVG2 may require drag & drop functionality, and we'll investigate html5's functionality for that
- </p>
- <p>
- <a href="http://www.w3.org/2011/12/22-svg-irc#T21-13-35">Telcon 2011-12-22</a>.
- </p>
- <p>
- Purpose: Allow easier drag & drop in svg, alignment with html5
- </p>
- <p>
- Owner: Erik
- </p>
- </div>
+<div class="annotation">
+ <p>SVG2 Requirement: Have event listener attributes on an appropriate interface</p>
+ <p>Resolution: SVG2 will move all events listener attributes to Element, in accordance with the similar move in HTML</p>
+ <p><a href="http://www.w3.org/2011/07/27-svg-minutes.html#item03">Seattle F2F 2011 Day 1</a>.</p>
+ <p>Purpose: Alignment with HTML</p>
+ <p>Owner: Cameron (ACTION-3283)</p>
+</div>
- <p>The following aspects of SVG are affected by events:</p>
- <ul>
- <li>Using <a href="svgdom.html">SVG Document Object Model
- (DOM)</a>, a script can <a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-registration">register
- DOM 2 event listeners</a>
- ([<a href="refs.html#ref-DOM2EVENTS">DOM2EVENTS</a>], section 1.3) so that script can be invoked when a
- given event occurs.</li>
- <li>SVG includes <a href="script.html#EventAttributes">event
- attributes</a> on selected elements which define script that
- can be executed when a given event occurs in association with
- the given element.</li>
- <li>SVG's <a>animation elements</a> can be defined to begin or end based on
- events.</li>
- </ul>
- <p>The following table lists all of the events which are
- recognized and supported in SVG. The <em>Event name</em> in the
- first column is the name to use within SVG's <a>animation elements</a> to
- define the events which can start or end animations. The
- <em>DOM2 name</em> in the second column is the name to use when
- defining <a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-registration">DOM 2 event listeners</a>
- ([<a href="refs.html#ref-DOM2EVENTS">DOM2EVENTS</a>], section 1.3).
- The <em>Event attribute name</em> in
- the fourth column contains the corresponding name of the <a
- href="script.html#EventAttributes">event attributes</a> that
- can be attached to elements in the SVG language.</p>
- <p>Requirements in the table on whether an event of a given type
- bubbles or is cancelable apply only to events that are created and
- dispatched by the user agent. Events of those types created from script
- using the <a class='idlattr' href='http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-DocumentEvent-createEvent'>createEvent</a>
- method on the <a>DocumentEvent</a> interface can be made to bubble
- or be cancelable with the
- <a class='idlattr' href='http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-Event-initEvent'>initEvent</a>
- method.</p>
+<div class="annotation">
+ <p>SVG2 Requirement: Introduce evt as an alias to event in event handlers</p>
+ <p>Resolution: We decide to resolve ISSUE-2176 by introducing evt as an alias to event in event handlers</p>
+ <p><a href="http://www.w3.org/2011/07/27-svg-minutes.html#item15">Seattle F2F 2011 Day 1</a>.</p>
+ <p>Purpose: Alignment with HTML</p>
+ <p>Owner: Cameron (ACTION-3093)</p>
+</div>
+
+<div class="annotation">
+ <p>SVG2 Requirement: Support drag & drop functionality</p>
+ <p>Resolution: SVG2 may require drag & drop functionality, and we'll investigate html5's functionality for that</p>
+ <p><a href="http://www.w3.org/2011/12/22-svg-irc#T21-13-35">Telcon 2011-12-22</a>.</p>
+ <p>Purpose: Allow easier drag & drop in svg, alignment with html5</p>
+ <p>Owner: Erik</p>
+</div>
+
+<p>The following aspects of SVG are affected by events:</p>
+
+<ul>
+ <li>Using <a href="svgdom.html">SVG Document Object Model (DOM)</a>, a script can
+ <a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-registration">register DOM 2 event listeners</a>
+ ([<a href="refs.html#ref-DOM2EVENTS">DOM2EVENTS</a>], section 1.3) so that
+ script can be invoked when a given event occurs.</li>
+
+ <li>SVG includes <a href="script.html#EventAttributes">event attributes</a>
+ on selected elements which define script that can be executed when a given
+ event occurs in association with the given element.</li>
+
+ <li>SVG's <a>animation elements</a> can be defined to begin or end based on
+ events.</li>
+</ul>
+
+<p>The following table lists all of the events which are
+recognized and supported in SVG. The <em>Event name</em> in the
+first column is the name to use within SVG's <a>animation elements</a> to
+define the events which can start or end animations. The
+<em>DOM2 name</em> in the second column is the name to use when
+defining <a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-registration">DOM 2 event listeners</a>
+([<a href="refs.html#ref-DOM2EVENTS">DOM2EVENTS</a>], section 1.3).
+The <em>Event attribute name</em> in the fourth column contains the
+corresponding name of the <a href="script.html#EventAttributes">event attributes</a>
+that can be attached to elements in the SVG language.</p>
+
+<p>Requirements in the table on whether an event of a given type
+bubbles or is cancelable apply only to events that are created and
+dispatched by the user agent. Events of those types created from script
+using the <a class='idlattr' href='http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-DocumentEvent-createEvent'>createEvent</a>
+method on the <a>DocumentEvent</a> interface can be made to bubble
+or be cancelable with the
+<a class='idlattr' href='http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-Event-initEvent'>initEvent</a>
+method.</p>
+
<table summary="Complete list of SVG events" class="vert event-table">
<tr>
<th>Event name and description</th>
@@ -187,7 +155,7 @@
</tr>
<tr>
<td id="FocusOutEvent"><p class="event-name"><strong>focusout</strong></p>
- <p>Occurs when an element loses focus, such as when a <a>'text'</a> becomes unselected.</p></td>
+ <p>Occurs when an element loses focus, such as when a <a>'text'</a> becomes unselected.</p></td>
<td>DOMFocusOut</td>
<td><a
href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-UIEvent">
@@ -197,7 +165,7 @@
</tr>
<tr>
<td id="ActivateEvent"><p class="event-name"><strong>activate</strong></p>
- <p>Occurs when an element is activated, for instance, through
+ <p>Occurs when an element is activated, for instance, through
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
@@ -511,17 +479,17 @@
href="script.html#OnRepeatEventAttribute">onrepeat</a></td>
</tr>
</table>
- <p>As in <a
- href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-eventgroupings-keyevents">
- DOM 2 Key events</a> ([<a href='refs.html#ref-DOM2EVENTS'>DOM2EVENTS</a>], section 1.6.3), 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.</p>
- <p>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.</p>
+<p>As in <a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-eventgroupings-keyevents">DOM 2 Key events</a>
+([<a href='refs.html#ref-DOM2EVENTS'>DOM2EVENTS</a>], section 1.6.3), 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.</p>
+
+<p>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.</p>
<p><a href='script.html#EventAttributes'>Event listener attributes</a>
can be specified on some elements to listen to a given event. The script in
@@ -535,158 +503,205 @@
<h2 id="UIEvents">User interface events</h2>
- <p>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 <a href="interact.html#PointerEvents">pointer events</a>,
- keyboard events, and document events.</p>
- <p>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.</p>
+<p>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 <a href="interact.html#PointerEvents">pointer events</a>,
+keyboard events, and document events.</p>
+
+<p>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.</p>
<h2 id="PointerEvents">Pointer events</h2>
- <p>User interface events that occur because of user actions
- performed on a pointer device are called pointer events.</p>
- <p>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.</p>
- <p>For each pointer event, the SVG user agent determines the
- <em>target element</em> 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 <a>'pointer-events'</a> 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
- <a>'display'</a> property on that element
- or one of its ancestors has a value of <span
- class="prop-value">none</span>), that element cannot be the
- target of pointer events.</p>
- <p>If a target element for the pointer event exists, then
- the event is dispatched to that element according to the
- normal <a href='http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-flow'>event flow</a>
- ([<a href='refs.html#ref-DOM2EVENTS'>DOM2EVENTS</a>], section 1.2).
- Note, however, that if the target element is in a
- <a>'use'</a> element shadow tree, that the event flow
- will include <a>SVGElementInstance</a> objects. See
- <a href='struct.html#UseElement'>The <span class='element-name'>'use'</span> element</a>
- for details.</p>
- <p>If a target element for the pointer event does not exist,
- then the event is ignored.</p>
+<p>User interface events that occur because of user actions
+performed on a pointer device are called pointer events.</p>
- <h2 id="pointer-processing">Hit-testing and processing order for user interface events</h2>
- <p>There are two distinct aspects of pointer-device interaction with an element or area:</p>
- <ol>
- <li>hit-testing, to determine if a pointer event (such as a mouse movement or mouse click) occurred within the interaction area of an element, and the subsequent DOM event flow;</li>
- <li>functional processing of actions associated with any relevant element.</li>
- </ol>
+<p>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.</p>
+
+<p>For each pointer event, the SVG user agent determines the
+<em>target element</em> 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 <a>'pointer-events'</a> 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
+<a>'display'</a> property on that element
+or one of its ancestors has a value of <span
+class="prop-value">none</span>), that element cannot be the
+target of pointer events.</p>
+
+<p>If a target element for the pointer event exists, then
+the event is dispatched to that element according to the
+normal <a href='http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-flow'>event flow</a>
+([<a href='refs.html#ref-DOM2EVENTS'>DOM2EVENTS</a>], section 1.2).
+Note, however, that if the target element is in a
+<a>'use'</a> element shadow tree, that the event flow
+will include <a>SVGElementInstance</a> objects. See
+<a href='struct.html#UseElement'>The <span class='element-name'>'use'</span> element</a>
+for details.</p>
+
+<p>If a target element for the pointer event does not exist,
+then the event is ignored.</p>
+
+<h2 id="pointer-processing">Hit-testing and processing order for user interface events</h2>
+
+<p>There are two distinct aspects of pointer-device interaction with an element or area:</p>
+
+<ol>
+ <li>hit-testing, to determine if a pointer event (such as a mouse movement or mouse click) occurred within the interaction area of an element, and the subsequent DOM event flow;</li>
+ <li>functional processing of actions associated with any relevant element.</li>
+</ol>
- <h3 id="hit-testing">Hit-testing</h3>
- <p>Determining whether a pointer event results in a positive <a>hit-test</a>
- depends upon the position of the pointer, the size and shape of the
- <a>graphics element</a>, and the computed value of the <a>'pointer-events'</a>
- property on the element. The definition of the <a>'pointer-events'</a>
- property below describes the exact region that is sensitive to pointer
- events for a given type of graphics element.</p>
+<h3 id="hit-testing">Hit-testing</h3>
- <p>Note that the <a>'svg'</a> element is not a <a>graphics element</a>, and in
- a <a href="conform.html#ConformingSVGStandAloneFiles">Conforming SVG Stand-Alone File</a>
- a <a>rootmost 'svg' element</a> will never be the target of pointer events,
- though events can bubble to this element.
- If a pointer event does not result in a positive <a>hit-test</a> on a
- <a>graphics element</a>, then it should evoke any user-agent-specific window
- behavior, such as a presenting a context menu or controls to allow zooming
- and panning of an SVG document fragment.</p>
+<p>Determining whether a pointer event results in a positive <a>hit-test</a>
+depends upon the position of the pointer, the size and shape of the
+<a>graphics element</a>, and the computed value of the <a>'pointer-events'</a>
+property on the element. The definition of the <a>'pointer-events'</a>
+property below describes the exact region that is sensitive to pointer
+events for a given type of graphics element.</p>
- <p>This specification does not define the behavior of pointer events on the <a>rootmost 'svg' element</a> for SVG images which are embedded by reference
- or inclusion within another document, e.g., whether the <a>rootmost 'svg' element</a> embedded in an HTML document intercepts mouse click events;
- future specifications may define this behavior, but for the purpose of this specification, the behavior is implementation-specific.</p>
-
+<p>Note that the <a>'svg'</a> element is not a <a>graphics element</a>, and in
+a <a href="conform.html#ConformingSVGStandAloneFiles">Conforming SVG Stand-Alone File</a>
+a <a>rootmost 'svg' element</a> will never be the target of pointer events,
+though events can bubble to this element.
+If a pointer event does not result in a positive <a>hit-test</a> on a
+<a>graphics element</a>, then it should evoke any user-agent-specific window
+behavior, such as a presenting a context menu or controls to allow zooming
+and panning of an SVG document fragment.</p>
+
+<p>This specification does not define the behavior of pointer events on the
+<a>rootmost 'svg' element</a> for SVG images which are embedded by reference
+or inclusion within another document, e.g., whether the <a>rootmost 'svg' element</a>
+embedded in an HTML document intercepts mouse click events; future specifications
+may define this behavior, but for the purpose of this specification, the behavior
+is implementation-specific.</p>
- <h3 id="event-processing">Event processing</h3>
- <p>An element which is the target of a user interface event may have
- particular interaction behaviors, depending upon the type of element and
- whether it has explicit associated interactions, such as scripted event
- listeners, CSS pseudo-classes matches, or declarative animations
- with event-based timing. The algorithm and order for processing
- user interface events for a given target element, after dispatching the
- DOM event, is as follows:</p>
-
- <ol>
- <li>If an event handler registered on this element invokes the <code>preventDefault()</code> DOM method, then no further processing for this element is performed, and the event follows the <a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-flow">event flow processing</a> as described in <a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html">DOM Level 2 Events</a> [<a href="refs.html#ref-DOM2EVENTS">DOM2EVENTS</a>] (or its successor);</li>
-
- <li>If the element has an associated title or description, such as a <a>'title element'</a> element or an <a>'xlink:title'</a> attribute, and the user agent supports the display of such information (e.g. via a tooltip or status-bar message), that information should be displayed, as appropriate to the type of pointer event;</li>
+<h3 id="event-processing">Event processing</h3>
- <li>If the element matches any relevant <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/selector.html#q15">dynamic pseudo-class selectors</a> appropriate to the type of pointer event, such as <code>:hover</code>, <code>:active</code>, or <code>:focus</code> as described in [<a href="refs.html#ref-CSS2">CSS2</a>], section 5.11, then the relevant class properties are applied;</li>
+<p>An element which is the target of a user interface event may have
+particular interaction behaviors, depending upon the type of element and
+whether it has explicit associated interactions, such as scripted event
+listeners, CSS pseudo-classes matches, or declarative animations
+with event-based timing. The algorithm and order for processing
+user interface events for a given target element, after dispatching the
+DOM event, is as follows:</p>
- <li>If the element and the event type are associated with the activation
- or cancelation of declarative animation though the use of
- <a href="animate.html#EventValueSyntax">event-value</a> timing specifiers,
- any corresponding instance times must be resolved, and any conseqential
- actions of this instance time resolution (such as immediately starting
- or stopping the animation) must be performed;</li>
+<ol>
+ <li>If an event handler registered on this element invokes the <code>preventDefault()</code>
+ DOM method, then no further processing for this element is performed, and the
+ event follows the <a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-flow">event flow processing</a>
+ as described in <a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html">DOM Level 2 Events</a>
+ [<a href="refs.html#ref-DOM2EVENTS">DOM2EVENTS</a>] (or its successor);</li>
- <li>If the element is a hyperlink (e.g., it is a descendant element of an <a>'a'</a> element), and the pointer event is of a type that activates that hyperlink (e.g. via a mouse click), and if the hyperlink traversal changes the context of the content (e.g. opens a different document, or moves the pointer away from this element by moving to another part of the same document), then no further processing for this element is performed;</li>
-
- <li>If the element is a <a>text content element</a>, and the event type is one which the user agent recognizes as part of a text-selection operation (e.g., a mouse click and drag, or a double-click), then the <a
- href="text.html#TextSelection">text selection</a> algorithm is performed;</li>
-
- <li>If the event type is one which the user agent associates with the evocation of special user-interface controls (e.g., a right-click or command-click evoking a context menu), the user agent should evoke such user-agent-specific behavior, such as presenting a context menu or controls to allow zooming and panning of an SVG document fragment.</li>
- </ol>
+ <li>If the element has an associated title or description, such as a <a>'title element'</a>
+ element or an <a>'xlink:title'</a> attribute, and the user agent supports the display
+ of such information (e.g. via a tooltip or status-bar message), that information
+ should be displayed, as appropriate to the type of pointer event;</li>
+
+ <li>If the element matches any relevant
+ <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/selector.html#q15">dynamic pseudo-class selectors</a>
+ appropriate to the type of pointer event, such as <code>:hover</code>,
+ <code>:active</code>, or <code>:focus</code> as described in
+ [<a href="refs.html#ref-CSS2">CSS2</a>], section 5.11, then the relevant class
+ properties are applied;</li>
+
+ <li>If the element and the event type are associated with the activation
+ or cancelation of declarative animation though the use of
+ <a href="animate.html#EventValueSyntax">event-value</a> timing specifiers,
+ any corresponding instance times must be resolved, and any conseqential
+ actions of this instance time resolution (such as immediately starting
+ or stopping the animation) must be performed;</li>
+
+ <li>If the element is a hyperlink (e.g., it is a descendant element of an <a>'a'</a>
+ element), and the pointer event is of a type that activates that hyperlink (e.g.
+ via a mouse click), and if the hyperlink traversal changes the context of the
+ content (e.g. opens a different document, or moves the pointer away from this
+ element by moving to another part of the same document), then no further
+ processing for this element is performed;</li>
+
+ <li>If the element is a <a>text content element</a>, and the event type is one
+ which the user agent recognizes as part of a text-selection operation (e.g.,
+ a mouse click and drag, or a double-click), then the
+ <a href="text.html#TextSelection">text selection</a> algorithm is performed;</li>
+
+ <li>If the event type is one which the user agent associates with the evocation
+ of special user-interface controls (e.g., a right-click or command-click
+ evoking a context menu), the user agent should evoke such user-agent-specific
+ behavior, such as presenting a context menu or controls to allow zooming and
+ panning of an SVG document fragment.</li>
+</ol>
<h2 id="PointerEventsProperty">The <span class="property">'pointer-events'</span> property</h2>
- <p>In different circumstances, authors may want to control
- under what conditions 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.</p>
-
- <p>The effects of masking and clipping differ with respect to <a href="interact.html#PointerEventsProperty">pointer-events</a>.
- A clip path is a geometric boundary, and a given point is clearly either inside or outside that boundary; thus, pointer events must be captured
- normally over the rendered areas of a clipped element, but must not be captured over the clipped areas, as described in the definition of
- <a href="masking.html#clipPath-geometry">clipping paths</a>. By contrast, a mask is not a binary transition, but a pixel operation,
- and different behavior for fully transparent and almost-but-not-fully-transparent may be confusingly arbitrary; as a consequence, for elements with a
- mask applied, pointer-events must still be captured even in areas where the mask goes to zero opacity. If an author wishes to achieve an effect where
- the transparent parts of a mask allow pointer-events to pass to an element below, a combination of masking and clipping may be used.</p>
- <p>The <a>'filter property'</a> property has no effect on pointer-events processing, and must in this context be treated as if the <a>'filter property'</a> wasn't specified.</p>
+
+<p>In different circumstances, authors may want to control
+under what conditions 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.</p>
- <p>For example, suppose a circle with a <a>'stroke'</a> of <span
- class="prop-value">red</span> (i.e., the outline is solid red)
- and a <a>'fill'</a> of <span class="prop-value">none</span> (i.e., the interior is not
- painted) is rendered directly on top of a rectangle with a <a>'fill'</a> of <span
- class="prop-value">blue</span>. 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.</p>
- <p>The <a>'pointer-events'</a> 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:</p>
- <ul>
- <li>user interface events such as mouse clicks</li>
- <li><a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/selector.html#q15">dynamic pseudo-classes</a>
- (i.e., :hover, :active and :focus;
- [<a href="refs.html#ref-CSS2">CSS2</a>], section 5.11)</li>
- <li>hyperlinks (see <a href="linking.html#Links">Links out of
- SVG content: the <span class="element-name">'a'</span>
- element</a>)</li>
- </ul>
+<p>The effects of masking and clipping differ with respect to
+<a href="interact.html#PointerEventsProperty">pointer events</a>. A clip path is
+a geometric boundary, and a given point is clearly either inside or outside that
+boundary; thus, pointer events must be captured normally over the rendered areas
+of a clipped element, but must not be captured over the clipped areas, as described
+in the definition of <a href="masking.html#clipPath-geometry">clipping paths</a>.
+By contrast, a mask is not a binary transition, but a pixel operation, and
+different behavior for fully transparent and almost-but-not-fully-transparent may
+be confusingly arbitrary; as a consequence, for elements with a mask applied,
+pointer events must still be captured even in areas where the mask goes to zero
+opacity. If an author wishes to achieve an effect where the transparent parts
+of a mask allow pointer events to pass to an element below, a combination of
+masking and clipping may be used.</p>
+
+<p>The <a>'filter property'</a> property has no effect on pointer events
+processing, and must in this context be treated as if the <a>'filter property'</a>
+wasn't specified.</p>
+
+<p>For example, suppose a circle with a <a>'stroke'</a> of
+<span class="prop-value">red</span> (i.e., the outline is solid red) and a
+<a>'fill'</a> of <span class="prop-value">none</span> (i.e., the interior is not
+painted) is rendered directly on top of a rectangle with a <a>'fill'</a> of
+<span class="prop-value">blue</span>. 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.</p>
+
+<p>The <a>'pointer-events'</a> 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:</p>
+
+<ul>
+ <li>user interface events such as mouse clicks</li>
+
+ <li><a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/selector.html#q15">dynamic pseudo-classes</a>
+ (i.e., :hover, :active and :focus; [<a href="refs.html#ref-CSS2">CSS2</a>],
+ section 5.11)</li>
+
+ <li>hyperlinks (see <a href="linking.html#Links">Links out of
+ SVG content: the <span class="element-name">'a'</span>
+ element</a>)</li>
+</ul>
+
<div class="propdef">
<dl>
<dt><span class="propdef-title property">'pointer-events'</span></dt>
@@ -732,284 +747,216 @@
</dd>
</dl>
</div>
- <dl>
- <dt><span class="prop-value">visiblePainted</span></dt>
- <dd>
- The given element can be the target element for pointer events when
- the <a>'visibility'</a> property is set to
- <span class="prop-value">visible</span> 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 <a>'fill'</a> property has
- an actual value other than <span class="prop-value">none</span> or it
- is over the perimeter (i.e., stroke) of the element and the <a>'stroke'</a>
- property is set to a value other than <span class="prop-value">none</span>.
- </dd>
-
- <dt><span class="prop-value">visibleFill</span></dt>
- <dd>
- The given element can be the target element for pointer events when the
- <a>'visibility'</a>
- property is set to <span class="prop-value">visible</span> and when the
- pointer is over the interior (i.e., fill) of the element. The value of
- the
- <a>'fill'</a>
- property does not affect event processing.
- </dd>
-
- <dt><span class="prop-value">visibleStroke</span></dt>
- <dd>
- The given element can be the target element for pointer events when the
- <a>'visibility'</a>
- property is set to <span class="prop-value">visible</span> and when the
- pointer is over the perimeter (i.e., stroke) of the element. The value
- of the
- <a>'stroke'</a>
- property does not affect event processing.
- </dd>
-
- <dt><span class="prop-value">visible</span></dt>
- <dd>
- The given element can be the target element for pointer events when the
- <a>'visibility'</a>
- property is set to <span class="prop-value">visible</span> and the
- pointer is over either the interior (i.e., fill) or the perimeter (i.e.,
- stroke) of the element. The values of the
- <a>'fill'</a>
- and
- <a>'stroke'</a>
- do not affect event processing.
- </dd>
-
- <dt><span class="prop-value">painted</span></dt>
- <dd>
- 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 <a>'fill'</a>
- property has an actual value other than
- <span class="prop-value">none</span> or it is over the perimeter (i.e.,
- stroke) of the element and the <a>'stroke'</a> property has an actual
- value other than <span class="prop-value">none</span>. The value of the
- <a>'visibility'</a> property does not effect event processing.
- </dd>
-
- <dt><span class="prop-value">fill</span></dt>
- <dd>
- 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
- <a>'fill'</a>
- and
- <a>'visibility'</a>
- properties do not affect event processing.
- </dd>
-
- <dt><span class="prop-value">stroke</span></dt>
- <dd>
- 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
- <a>'stroke'</a>
- and
- <a>'visibility'</a>
- properties do not affect event processing.
- </dd>
-
- <dt><span class="prop-value">all</span></dt>
- <dd>
- 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
- <a>'fill'</a>,
- <a>'stroke'</a>
- and
- <a>'visibility'</a>
- properties do not affect event processing.
- </dd>
- <dt><span class="prop-value">none</span></dt>
- <dd>The given element does not receive pointer events.</dd>
- </dl>
- <p>
- For text elements, hit-testing is performed on a character cell basis:
- </p>
- <ul>
- <li>
- The value <span class="prop-value">visiblePainted</span> means that the
- text string can receive events anywhere within the character cell if
- either the
- <a>'fill'</a>
- property is set to a value other than <span class="prop-value">none</span>
- or the
- <a>'stroke'</a>
- property is set to a value other than <span class="prop-value">none</span>,
- with the additional requirement that the
- <a>'visibility'</a>
- property is set to <span class="prop-value">visible</span>.
- </li>
- <li>
- The values <span class="prop-value">visibleFill</span>,
- <span class="prop-value">visibleStroke</span>
- and
- <span class="prop-value">visible</span>
- are equivalent and indicate that the text string can receive events
- anywhere within the character cell if the
- <a>'visibility'</a>
- property is set to <span class="prop-value">visible</span>. The values
- of the
- <a>'fill'</a>
- and
- <a>'stroke'</a>
- properties do not affect event processing.
- </li>
- <li>
- The value <span class="prop-value">painted</span> means that the text
- string can receive events anywhere within the character cell if either
- the
- <a>'fill'</a>
- property is set to a value other than
- <span class="prop-value">none</span> or the
- <a>'stroke'</a>
- property is set to a value other than <span class="prop-value">none</span>.
- The value of the
- <a>'visibility'</a>
- property does not affect event processing.
- </li>
- <li>
- The values <span class="prop-value">fill</span>,
- <span class="prop-value">stroke</span> and
- <span class="prop-value">all</span> are equivalent and indicate that
- the text string can receive events anywhere within the character cell.
- The values of the
- <a>'fill'</a>,
- <a>'stroke'</a>
- and
- <a>'visibility'</a>
- properties do not affect event processing.
- </li>
- <li>
- The value <span class="prop-value">none</span> indicates that the given
- text does not receive pointer events.
- </li>
- </ul>
- <p>
- For raster images, hit-testing 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 basis (i.e., the alpha values for
- pixels under the pointer help determine whether the image
- receives the event):
- </p>
- <ul>
- <li>
- The value <span class="prop-value">visiblePainted</span> means that the
- raster image can receive events anywhere within the bounds of the image
- if any pixel from the raster image which is under the pointer is not
- fully transparent, with the additional requirement that the
- <a>'visibility'</a>
- property is set to <span class="prop-value">visible</span>.
- </li>
- <li>
- The values <span class="prop-value">visibleFill</span>,
- <span class="prop-value">visibleStroke</span> and
- <span class="prop-value">visible</span> are equivalent and indicate
- that the image can receive events anywhere within the rectangular area
- for the image if the
- <a>'visibility'</a>
- property is set to <span class="prop-value">visible</span>.
- </li>
- <li>
- The value <span class="prop-value">painted</span> means that the raster
- image can receive events anywhere within the bounds of the image if any
- pixel from the raster image which is under the pointer is not fully
- transparent. The value of the
- <a>'visibility'</a>
- property does not affect event processing.
- </li>
- <li>The values <span class="prop-value">fill</span>, <span
- class="prop-value">stroke</span> and <span
- class="prop-value">all</span> are equivalent and indicate
- that the image can receive events anywhere within the
- rectangular area for the image. The value of the <a>'visibility'</a> property does not
- affect event processing.</li>
- <li>The value <span class="prop-value">none</span> indicates
- that the image does not receive pointer events.</li>
- </ul>
- <p>Note that for raster images, the values of properties <a>'opacity'</a>,
- <a>'fill-opacity'</a>, <a>'stroke-opacity'</a>, <a>'fill'</a> and
- <a>'stroke'</a> do not affect event processing.</p>
+<dl>
+ <dt><span class="prop-value">visiblePainted</span></dt>
+ <dd>The given element can be the target element for pointer events when
+ the <a>'visibility'</a> property is set to
+ <span class="prop-value">visible</span> 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 <a>'fill'</a> property has
+ an actual value other than <span class="prop-value">none</span> or it
+ is over the perimeter (i.e., stroke) of the element and the <a>'stroke'</a>
+ property is set to a value other than <span class="prop-value">none</span>.</dd>
+
+ <dt><span class="prop-value">visibleFill</span></dt>
+ <dd>The given element can be the target element for pointer events when the
+ <a>'visibility'</a>
+ property is set to <span class="prop-value">visible</span> and when the
+ pointer is over the interior (i.e., fill) of the element. The value of
+ the <a>'fill'</a> property does not affect event processing.</dd>
+
+ <dt><span class="prop-value">visibleStroke</span></dt>
+ <dd>The given element can be the target element for pointer events when the
+ <a>'visibility'</a> property is set to <span class="prop-value">visible</span>
+ and when the pointer is over the perimeter (i.e., stroke) of the element.
+ The value of the <a>'stroke'</a> property does not affect event processing.</dd>
+
+ <dt><span class="prop-value">visible</span></dt>
+ <dd>The given element can be the target element for pointer events when the
+ <a>'visibility'</a> property is set to <span class="prop-value">visible</span>
+ and the pointer is over either the interior (i.e., fill) or the perimeter
+ (i.e., stroke) of the element. The values of the <a>'fill'</a> and
+ <a>'stroke'</a> do not affect event processing.</dd>
+
+ <dt><span class="prop-value">painted</span></dt>
+ <dd>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 <a>'fill'</a>
+ property has an actual value other than
+ <span class="prop-value">none</span> or it is over the perimeter (i.e.,
+ stroke) of the element and the <a>'stroke'</a> property has an actual
+ value other than <span class="prop-value">none</span>. The value of the
+ <a>'visibility'</a> property does not effect event processing.</dd>
+
+ <dt><span class="prop-value">fill</span></dt>
+ <dd>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 <a>'fill'</a> and <a>'visibility'</a> properties do not affect event
+ processing.</dd>
+
+ <dt><span class="prop-value">stroke</span></dt>
+ <dd>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 <a>'stroke'</a> and <a>'visibility'</a> properties do not affect
+ event processing.</dd>
+
+ <dt><span class="prop-value">all</span></dt>
+ <dd>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 <a>'fill'</a>, <a>'stroke'</a>
+ and <a>'visibility'</a> properties do not affect event processing.</dd>
+
+ <dt><span class="prop-value">none</span></dt>
+ <dd>The given element does not receive pointer events.</dd>
+</dl>
+
+<p>For text elements, hit-testing is performed on a character cell basis:</p>
+
+<ul>
+ <li>The value <span class="prop-value">visiblePainted</span> means that the
+ text string can receive events anywhere within the character cell if
+ either the <a>'fill'</a> property is set to a value other than
+ <span class="prop-value">none</span> or the <a>'stroke'</a> property is set
+ to a value other than <span class="prop-value">none</span>, with the
+ additional requirement that the <a>'visibility'</a> property is set to
+ <span class="prop-value">visible</span>.</li>
+
+ <li>The values <span class="prop-value">visibleFill</span>,
+ <span class="prop-value">visibleStroke</span> and
+ <span class="prop-value">visible</span> are equivalent and indicate that the
+ text string can receive events anywhere within the character cell if the
+ <a>'visibility'</a> property is set to <span class="prop-value">visible</span>.
+ The values of the <a>'fill'</a> and <a>'stroke'</a> properties do not affect
+ event processing.</li>
+
+ <li>The value <span class="prop-value">painted</span> means that the text
+ string can receive events anywhere within the character cell if either
+ the <a>'fill'</a> property is set to a value other than
+ <span class="prop-value">none</span> or the <a>'stroke'</a> property is set to
+ a value other than <span class="prop-value">none</span>. The value of the
+ <a>'visibility'</a> property does not affect event processing.</li>
+
+ <li>The values <span class="prop-value">fill</span>,
+ <span class="prop-value">stroke</span> and <span class="prop-value">all</span>
+ are equivalent and indicate that the text string can receive events anywhere
+ within the character cell. The values of the <a>'fill'</a>, <a>'stroke'</a>
+ and <a>'visibility'</a> properties do not affect event processing.</li>
+
+ <li>The value <span class="prop-value">none</span> indicates that the given
+ text does not receive pointer events.</li>
+</ul>
+
+<p>For raster images, hit-testing 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 basis (i.e., the alpha values for
+pixels under the pointer help determine whether the image
+receives the event):</p>
+
+<ul>
+ <li>The value <span class="prop-value">visiblePainted</span> means that the
+ raster image can receive events anywhere within the bounds of the image
+ if any pixel from the raster image which is under the pointer is not
+ fully transparent, with the additional requirement that the <a>'visibility'</a>
+ property is set to <span class="prop-value">visible</span>.</li>
+
+ <li>The values <span class="prop-value">visibleFill</span>,
+ <span class="prop-value">visibleStroke</span> and
+ <span class="prop-value">visible</span> are equivalent and indicate
+ that the image can receive events anywhere within the rectangular area
+ for the image if the <a>'visibility'</a> property is set to
+ <span class="prop-value">visible</span>.</li>
+
+ <li>The value <span class="prop-value">painted</span> means that the raster
+ image can receive events anywhere within the bounds of the image if any
+ pixel from the raster image which is under the pointer is not fully
+ transparent. The value of the <a>'visibility'</a> property does not affect
+ event processing.</li>
+
+ <li>The values <span class="prop-value">fill</span>,
+ <span class="prop-value">stroke</span> and <span class="prop-value">all</span>
+ are equivalent and indicate that the image can receive events anywhere within
+ the rectangular area for the image. The value of the <a>'visibility'</a>
+ property does not affect event processing.</li>
+
+ <li>The value <span class="prop-value">none</span> indicates
+ that the image does not receive pointer events.</li>
+</ul>
+
+<p>Note that for raster images, the values of properties <a>'opacity'</a>,
+<a>'fill-opacity'</a>, <a>'stroke-opacity'</a>, <a>'fill'</a> and
+<a>'stroke'</a> do not affect event processing.</p>
<h2 id="EnableZoomAndPanControls">Magnification and panning</h2>
- <div class="annotation">
- <p>
- SVG2 Requirement: Support level of detail control.
- </p>
- <p>
- Resolution: We will support Level of Detail control in SVG2.
- </p>
- <p>
- <a href="">Pre-TPAC F2F Day 1</a>.
- </p>
- <p>
- Purpose: Control visibility of elements based on zoom level (useful, for example,
- in mapping). See <a href="http://www.w3.org/Submission/2011/SUBM-SVGTL-20110607/#VisibilityControllingAccordingToZooming">Tiling and Layering Module for SVG 1.2 Tiny</a>.
- </p>
- <p>
- Owner: Doug.
- </p>
- </div>
+<div class="annotation">
+ <p>SVG2 Requirement: Support level of detail control.</p>
+ <p>Resolution: We will support Level of Detail control in SVG2.</p>
+ <p><a href="">Pre-TPAC F2F Day 1</a>.</p>
+ <p>Purpose: Control visibility of elements based on zoom level (useful, for example,
+ in mapping). See <a href="http://www.w3.org/Submission/2011/SUBM-SVGTL-20110607/#VisibilityControllingAccordingToZooming">Tiling and Layering Module for SVG 1.2 Tiny</a>.</p>
+ <p>Owner: Doug.</p>
+</div>
- <p id="ZoomAndPanAttribute">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 <a>outermost svg element</a>).</p>
- <p>Panning represents a translation (i.e., a shift)
- transformation on an SVG document fragment in response to a
- user interface action.</p>
- <p>SVG user agents that operate in interaction-capable user
- environments are required to support the ability to magnify and
- pan.</p>
- <p>The <a>outermost svg element</a>
- in an SVG document fragment has attribute <a>'svg/zoomAndPan'</a>, which takes the possible
- values of <em>disable</em> and <em>magnify</em>, with the
- default being <em>magnify</em>.</p>
- <p>If <em>disable</em>, the user agent shall disable any
- magnification and panning controls and not allow the user to
- magnify or pan on the given document fragment.</p>
- <p>If <em>magnify</em>, 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.</p>
- <p>If a <a>'svg/zoomAndPan'</a> attribute is
- assigned to an inner <a>'svg'</a>
- element, the <a>'svg/zoomAndPan'</a> setting
- on the inner <a>'svg'</a> element
- will have no effect on the SVG user agent.</p>
- <p><span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>: no.</span></p>
+<p id="ZoomAndPanAttribute">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 <a>outermost svg element</a>).</p>
+
+<p>Panning represents a translation (i.e., a shift)
+transformation on an SVG document fragment in response to a
+user interface action.</p>
+
+<p>SVG user agents that operate in interaction-capable user
+environments are required to support the ability to magnify and pan.</p>
+
+<p>The <a>outermost svg element</a>
+in an SVG document fragment has attribute <a>'svg/zoomAndPan'</a>, which takes the possible
+values of <em>disable</em> and <em>magnify</em>, with the
+default being <em>magnify</em>.</p>
+
+<p>If <em>disable</em>, the user agent shall disable any
+magnification and panning controls and not allow the user to
+magnify or pan on the given document fragment.</p>
+
+<p>If <em>magnify</em>, 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.</p>
+
+<p>If a <a>'svg/zoomAndPan'</a> attribute is
+assigned to an inner <a>'svg'</a>
+element, the <a>'svg/zoomAndPan'</a> setting
+on the inner <a>'svg'</a> element
+will have no effect on the SVG user agent.</p>
+
+<p><span class="anim-target"><a href="animate.html#Animatable">Animatable</a>: no.</span></p>
<h2 id="Cursors">Cursors</h2>
<h3 id="CursorIntro">Introduction to cursors</h3>
- <p>Some interactive display environments provide the ability to
- modify the appearance of the pointer, which is also known as
- the <em>cursor</em>. Three types of cursors are available:</p>
- <ul>
- <li>Standard built-in cursors</li>
- <li>Platform-specific custom cursors</li>
- <li>Platform-independent custom cursors</li>
- </ul>
- <p>The <a>'cursor property'</a> property is used to
- specify which cursor to use. The <a>'cursor property'</a> property can be used to
- reference standard built-in cursors by specifying a keyword
- such as <em>crosshair</em> or a custom cursor. Custom cursors
- are referenced via a <funciri> and can point to either an
- external resource such as a platform-specific cursor file or to
- a <a>'cursor element'</a> element, which can be
- used to define a platform-independent cursor.</p>
+<p>Some interactive display environments provide the ability to
+modify the appearance of the pointer, which is also known as
+the <em>cursor</em>. Three types of cursors are available:</p>
+
+<ul>
+ <li>Standard built-in cursors</li>
+ <li>Platform-specific custom cursors</li>
+ <li>Platform-independent custom cursors</li>
+</ul>
+
+<p>The <a>'cursor property'</a> property is used to
+specify which cursor to use. The <a>'cursor property'</a> property can be used to
+reference standard built-in cursors by specifying a keyword
+such as <em>crosshair</em> or a custom cursor. Custom cursors
+are referenced via a <a><funciri></a> and can point to either an
+external resource such as a platform-specific cursor file or to
+a <a>'cursor element'</a> element, which can be
+used to define a platform-independent cursor.</p>
<h3 id="CursorProperty">The <span class="property">'cursor'</span> property</h3>
@@ -1061,82 +1008,92 @@
</dd>
</dl>
</div>
- <p>This property specifies the type of cursor to be displayed
- for the pointing device. Values have the following
- meanings:</p>
- <dl>
- <dt><span class='attr-value'>auto</span></dt>
- <dd>The UA determines the cursor to display based on the
- current context.</dd>
- <dt><span class='attr-value'>crosshair</span></dt>
- <dd>A simple crosshair (e.g., short line segments resembling
- a "+" sign).</dd>
- <dt><span class='attr-value'>default</span></dt>
- <dd>The platform-dependent default cursor. Often rendered as
- an arrow.</dd>
- <dt><span class='attr-value'>pointer</span></dt>
- <dd>The cursor is a pointer that indicates a link.</dd>
- <dt><span class='attr-value'>move</span></dt>
- <dd>Indicates something is to be moved.</dd>
- <dt><span class='attr-value'>e-resize, ne-resize, nw-resize, n-resize,
- se-resize, sw-resize, s-resize, w-resize</span></dt>
- <dd>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.</dd>
- <dt><span class='attr-value'>text</span></dt>
- <dd>Indicates text that can be selected. Often rendered as an
- I-bar.</dd>
- <dt><span class='attr-value'>wait</span></dt>
- <dd>Indicates that the program is busy. Often rendered as a
- watch or hourglass.</dd>
- <dt><span class='attr-value'>help</span></dt>
- <dd>Help is available for the object under the cursor. Often
- rendered as a question mark or a balloon.</dd>
- <dt><span class='attr-value'><funciri></span></dt>
- <dd>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.</dd>
- </dl>
- <div class="example">
+
+<p>This property specifies the type of cursor to be displayed
+for the pointing device. Values have the following
+meanings:</p>
+
+<dl>
+ <dt><span class='attr-value'>auto</span></dt>
+ <dd>The UA determines the cursor to display based on the current context.</dd>
+
+ <dt><span class='attr-value'>crosshair</span></dt>
+ <dd>A simple crosshair (e.g., short line segments resembling a "+" sign).</dd>
+
+ <dt><span class='attr-value'>default</span></dt>
+ <dd>The platform-dependent default cursor. Often rendered as an arrow.</dd>
+
+ <dt><span class='attr-value'>pointer</span></dt>
+ <dd>The cursor is a pointer that indicates a link.</dd>
+
+ <dt><span class='attr-value'>move</span></dt>
+ <dd>Indicates something is to be moved.</dd>
+
+ <dt><span class='attr-value'>e-resize, ne-resize, nw-resize, n-resize,
+ se-resize, sw-resize, s-resize, w-resize</span></dt>
+
+ <dd>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.</dd>
+
+ <dt><span class='attr-value'>text</span></dt>
+ <dd>Indicates text that can be selected. Often rendered as an
+ I-bar.</dd>
+
+ <dt><span class='attr-value'>wait</span></dt>
+ <dd>Indicates that the program is busy. Often rendered as a
+ watch or hourglass.</dd>
+
+ <dt><span class='attr-value'>help</span></dt>
+ <dd>Help is available for the object under the cursor. Often
+ rendered as a question mark or a balloon.</dd>
+
+ <dt><span class='attr-value'><funciri></span></dt>
+ <dd>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.</dd>
+</dl>
+
+<div class="example">
<pre>
-P { cursor : url("mything.cur"), url("second.svg#curs"), text; }
+text { cursor: url("mything.cur"), url("second.svg#curs"), text; }
</pre>
- </div>
- <p>The <a>'cursor property'</a> property for SVG
- is identical to the
- <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/ui.html#propdef-cursor"><span class="property">'cursor'</span>
- property defined in CSS2</a>
- ([<a href="refs.html#ref-CSS2">CSS2</a>], section 18.1), with the
- additional requirement that SVG user agents must support cursors defined by
- the SVG <a>'cursor element'</a> element. This gives a single, cross-platform, interoperable cursor format, with PNG as the raster component.</p>
+</div>
+
+<p>The <a>'cursor property'</a> property for SVG
+is identical to the <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/ui.html#propdef-cursor"><span class="property">'cursor'</span>
+property defined in CSS2</a> ([<a href="refs.html#ref-CSS2">CSS2</a>], section
+18.1), with the additional requirement that SVG user agents must support cursors
+defined by the SVG <a>'cursor element'</a> element. This gives a single, cross-platform,
+interoperable cursor format, with PNG as the raster component.</p>
<h3 id="CursorElement">The <span class="element-name">'cursor'</span> element</h3>
<edit:with element='cursor'>
- <p>The <a>'cursor element'</a> 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 image [<a href="refs.html#ref-PNG">PNG</a>]
- and define a <a>'cursor element'</a> element
- that references the PNG image and identifies the exact position
- within the image which is the pointer position (i.e., the hot
- spot).</p>
- <p>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.</p>
+<p>The <a>'cursor element'</a> 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 image [<a href="refs.html#ref-PNG">PNG</a>]
+and define a <a>'cursor element'</a> element
+that references the PNG image and identifies the exact position
+within the image which is the pointer position (i.e., the hot spot).</p>
+
+<p>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.</p>
<edit:elementsummary name='cursor'/>