 first | Daisy Diff compare report. Click on the changed parts for a detailed description. Use the left and right arrow keys to walk through the modifications. |
last  |
| first | Daisy Diff compare report. Click on the changed parts for a detailed description. Use the left and right arrow keys to walk through the modifications. |
last |
This appendix is normative.
During the later stages of development of the SVG Mobile 1.1 specification [SVGM11] it became obvious that there was a requirement to subset the SVG and XML DOM in order to reduce the burden on implementations. SVG Tiny 1.2 adds new features to the uDOM, allowing for as much necessary functionality as possible, still being suitable for SVG Tiny implementations.
Furthermore, it should be possible to implement the uDOM on devices that support SVG Tiny 1.1 although, in this case, the scripting would be external to the SVG document (since SVG Tiny 1.1 does not support inline scripting).
The goal of the uDOM definition is to provide an API that allows access to initial and computed attribute and property values, to reduce the number of interfaces compared to the traditional SVG DOM, to reduce run-time memory footprint using necessary features of the core XML DOM, as well as the most useful SVG features (such as transformation matrices). A subset of the uDOM (corresponding to SVG Tiny 1.1) is already successfully implemented by various implementations of JSR 226: Scalable 2D Vector Graphics API for J2ME, compatibility with which is another goal of the uDOM [JSR226].
The uDOM makes normative reference to DOM Level 2 Events ( [DOM2EVENTS]), and informative reference to DOM Level 3 Events ( [DOM3EVENTS]). A minimal subset of DOM Level 3 Events was included in the uDOM to specify functionality as currently implemented on mobile devices, since DOM Level 3 Events was not yet a Recommendation at the time of publication. It is anticipated that DOM Level 3 Events may change to reflect the needs of the current Web environment, and any conflicting changes will supersede the functionality specified here for later SVG specifications.
The IDL definition for the uDOM is provided.
This appendix consists of the following parts:
Overview of the SVG uDOM — an informative introduction to the uDOM, including a summary of supported features and descriptions by topic of the key features and constraints together with examples.
Conforming to the SVG uDOM — a normative section that states conformance criteria for the SVG uDOM as well as descriptions of key features.
A normative definition of all the interfaces in the SVG uDOM (DOM Core APIs, DOM Views APIs, SMIL DOM APIs, DOM Events APIs and SVG DOM APIs).
The following sections provides an informative overview of the SVG uDOM's key features and constraints.
Note: Like other W3C DOM definitions, the SVG uDOM is programming-language independent. Although this appendix only contains ECMAScript and Java language examples, the SVG uDOM is compatible with other programming languages.
The SVG uDOM offers access to a Document object which is the root for accessing other features. The way the Document object becomes available depends on the usage context. One way to gain access to In some languages, such as Java, the Document object is to implement can be obtained by implementing the EventListenerInitializer2 interface. The SVG Tiny user agent will invoke the implementation's initializeEventListeners method once the programming logic script has been loaded and is ready to bind to the document. The Document object is sometimes accessible through other means, for example as the global document variable through the AbstractView::document member which is available on the global object in ECMAScript.
The SVG uDOM only allows navigation of the document node and the element nodes in the DOM tree. Two options are available for navigating the hierarchy of elements:
getElementById method on the Document interface. parentNode attribute on the Node interface. The ElementTraversal interface provides firstElementChild, lastElementChild, previousElementSibling and nextElementSibling, which are particularly suitable for constrained devices [ET]. These traversal mechanisms skip over intervening nodes between element nodes, such as text nodes which might only contain spaces, tabs and newlineswhite space.
The SVG uDOM allows the creation of new Elementselements using the createElementNS method of the Document interface.
String svgNS = "http://www.w3.org/2000/svg"; Element myRect = document.createElementNS(svgNS, "rect");
Element insertion is the ability to insert new elements to a document tree.
SVG uDOM allows the insertion of an Element Elements can be inserted into the document tree by calling the appendChild or insertBefore methods on the Node that is to be the parent.
var svgNS = "http://www.w3.org/2000/svg"; // Create a new <rect> element var myRect = document.createElementNS(svgNS, "rect"); // Set the various <rect> properties before appending ... // Add element to the root of the document var svgRoot = document.documentElement; svgRoot.appendChild(myRect); // Create a new <ellipse> element var myEllipse = document.createElementNS(svgNS, "ellipse"); // Set the various <ellipse> properties before insertion ... // Insert the ellipse before the rectangle svgRoot.insertBefore(myEllipse, myRect);
Element removal is the ability to remove an element from a document tree. SVG uDOM allows removal of Elements.
An element can be removed from the document tree by calling the removeChild method on its parent Node.
var myRect = ...;
// See Element creation
var myGroup = document.getElementById("myGroup");
myGroup.appendChild(myRect);
...
myGroup.removeChild(myRect);
The SVG Tiny 1.2 uDOM supports two ways of accessing XML attributes and CSS properties; the standard way via getAttributeNS and setAttributeNS on the Element interface, and via a new concept called Traits traits.
A trait is the typed value (e.g. a number, not just a string), associated with an element by an XML attribute or a CSS property. The trait facilities in the SVG uDOM allow for strongly-typed access to certain attribute and property values. For example, there is a getFloatTrait(...) method for getting an attribute or property value directly as a float. This contrasts , in contrast with the getAttributeNS method which always returns a string. The trait facilities in the SVG uDOM are available on the TraitAccess interface, which is implemented by all DOM objects representing SVG elements.
float width = myRect.getFloatTrait('"width'"); width += 10; myRect.setFloatTrait('"width'", width);
An important difference between getTraitNS (and along with all other variants of getTrait trait getter methods) and getAttributeNS is that getTraitNS returns the computed attribute value but getAttributeNS returns the specified attribute value (which might not exactly match the original specified value due to the possibility of user agent value normalization as described in Attribute Normalization/property normalization).
<g fill="red"> <rect <rect id="r1" x="1" y="1" width="5" height="5"/> <rect <rect id="r2" fill="inherit" x="1" y="1" width="5" height="5"/> </g>
In the above example:
r1.getTraitNS(null, "fill") returns "red" (or an equivalent normalized form, see Attribute/
r2.getTraitNS(null, "fill") returns "red" (or an equivalent normalized form, see Attribute/
r1.getAttributeNS(null, "fill") returns "".
r2.getAttributeNS(null, "fill") returns "inherit".
A trait Traits may also be animated, by animating the underlying XML attribute or property. To access the animated value of a trait, use getPresentationTraitthe getPresentationTrait, along with the other similarly named presentation trait getter methods on the TraitAccess interface, can be used.
Event Listener Registration and Removal is the The SVG uDOM utilizes DOM Level 2 Events, using the EventTarget interface, to support the ability to add and remove new event listeners from to nodes in a Document. SVG uDOM allows adding and removing EventListeners. document.
class MyEventListener implements EventListener {
public void handleEvent(Event evt) {
// Do whatever is needed here
}
}
...
// Create a listener
EventListener llisten1 = new MyEventListener();
SVGElement myRect = (SVGElement)document.getElementById("myRect");
// Listen to click events, during the bubbling phase
SVGElement myRect = (SVGElement)document.getElementById("myRect");
myRect.addEventListener("click", llisten1, false);
...
// Remove the click listener
myRect.removeEventListener("click", llisten1, false);
SVG uDOM allows code to start or end timed elements (i.e. elements implementing SVGTimedElement).
Animation elements can be started and stopped using the methods available on the ElementTimeControl interface.
var animateColor = document.getElementById("myAnimation");
// Start the animation 2.5 seconds from now.
animateColor.beginElementAt(2.5);
Control of multimedia elements, such as the 'audio', 'video', and 'animation' elements is available through a combination of the ElementTimeControl and SVGTimedElement interfaces. Some common controls, and the interface methods to access them, are listed below:
Note that SVG 1.2 Tiny does not define controlling the rate of playback (such as fast-forward or reverse) for time container elements. This functionality may be included in a future specification.
The SVG uDOM uses the same Java package names as the upcoming SVG 1.2 Full DOM (e.g. org.w3c.dom, org.w3c.dom.events, org.w3c.dom.svg). This allows Java applications which restrict themselves to the features in the SVG uDOM to also run in implementations that support the SVG 1.2 Full DOM.
The SVG uDOM uses IEEE-754 single precision floating point values to represent float values in the IDL [IEEE-754]. While such values support a number of non-finite values — a set of NaN (Not a Number) values and positive & negative infinity — these values are never used by the uDOM. Thus, unless otherwise specified in the prose for an operation or attribute, a DOMException with error code NOT_SUPPORTED_ERR must be thrown if a non-finite value is passed as an operation argument, or assigned to an attribute, whose type is float, or if a list of floating point values containing a non-finite value is passed as an operation argument, or assigned to an attribute, whose type is sequence<float>.
In addition, none of the operations or attributes in the uDOM distinguish between positive and negative zero. A negative zero must be treated as a positive zero when passed as an operation argument, or assigned to an attribute, whose type is float or sequence<float>.
Operations and attributes in the uDOM will never return a non-finite or negative zero value from an operation or attribute.
A viewer implementing the uDOM is allowed to return normalized attribute values (defined in DOM 3[DOM3], section 1.4) from getAttributeNS and the various getTrait trait getter methods (getTrait, getTraitNS, getFloatTrait, etc...) and getPresentationTrait trait presentation value getter methods (getPresentationTrait, getPresentationTraitNS, getFloatPresentationTrait, etc...). Following The following is a list of possible attribute normalizations:
In the SVG uDOM, there are two alternative ways to access an element's textual content. Text access via the TraitAccess interface is available on all SVGElements. This was available in the SVG Tiny 1.1 uDOM (used in the JSR 226 specification [JSR226]) and is still available in order to keep backward compability. The SVG Tiny 1.2 uDOM specification introduces the textContent attribute on the Node interface as a more generic text access mechanism.
To access or set the text string value for an element via traits you invoke getTrait() or setTrait() on that element and pass #text as the name of the trait you want to get or set. For example, MyTextElement.setTrait("#text", "Hello"); Text access via the #text mechanism must be supported on text content, 'desc', 'title' and 'metadata' elements. Text access to other elements defined within this specification (see list of elements) is not supported and an implementation should ignore any text on these elements.
The result of getting and setting text content via the #text mechanism is exactly the same as when using the textContent attribute. Therefore the user should be aware of the fact that styling by child 'tspan' elements (i.e. 'tspan' elements that are children of the element which text content is retrieved) will be lost if a text string is retrieved from an element and then set back again.
The #text trait is included for compatibility with the JSR 226 specification [JSR226]. It is recommended that where compatibility with JSR 226 implementations is not required content developers use textContent instead as it is more generally applicable and supports better compatibility with DOM Level 3 Core [DOM3].
INUSE_ATTRIBUTE_ERR, and VALIDATION_ERR). However, in the interest of facilitating implementations that support both the uDOM and the complete DOM Level 3 Core, none of the exception codes are removed.
exception DOMException
{
unsigned short code;
};
// ExceptionCode
const unsigned short INDEX_SIZE_ERR = 1;
const unsigned short DOMSTRING_SIZE_ERR = 2;
const unsigned short HIERARCHY_REQUEST_ERR = 3;
const unsigned short WRONG_DOCUMENT_ERR = 4;
const unsigned short INVALID_CHARACTER_ERR = 5;
const unsigned short NO_DATA_ALLOWED_ERR = 6;
const unsigned short NO_MODIFICATION_ALLOWED_ERR = 7;
const unsigned short NOT_FOUND_ERR = 8;
const unsigned short NOT_SUPPORTED_ERR = 9;
const unsigned short INUSE_ATTRIBUTE_ERR = 10;
const unsigned short INVALID_STATE_ERR = 11;
const unsigned short SYNTAX_ERR = 12;
const unsigned short INVALID_MODIFICATION_ERR = 13;
const unsigned short NAMESPACE_ERR = 14;
const unsigned short INVALID_ACCESS_ERR = 15;
const unsigned short VALIDATION_ERR = 16;
const unsigned short TYPE_MISMATCH_ERR = 17;
INDEX_SIZE_ERR. DOMSTRING_SIZE_ERR. HIERARCHY_REQUEST_ERR. WRONG_DOCUMENT_ERR. INVALID_CHARACTER_ERR. NO_DATA_ALLOWED_ERR. NO_MODIFICATION_ALLOWED_ERR. NOT_FOUND_ERR. NOT_SUPPORTED_ERR. INUSE_ATTRIBUTE_ERR. INVALID_STATE_ERR. SYNTAX_ERR. INVALID_MODIFICATION_ERR. NAMESPACE_ERR. INVALID_ACCESS_ERR. VALIDATION_ERR. TYPE_MISMATCH_ERR. This interface is a subset of the Node interface defined in DOM Level 3 Core ([DOM3], section 1.4). Node types that must be supported in the uDOM are Element nodes and Document nodes.
This subset does not support the NodeType and DocumentPosition definition groups, since the nodeType field and the compareDocumentPosition method are not members of the subsetted interface.
Concerning textContent, there is no requirement to create a Text node on setting since this subset has no interface representing Text nodes. However, the behaviour of textContent must be as if the Text node described in the the definition of textContent had indeed been created.
An alternate way of accessing text content on elements defined within the SVG specification is via the getTrait("#text") syntaxwith the use of the #text trait.
interface Node
{
readonly attribute DOMString namespaceURI;
readonly attribute DOMString localName;
readonly attribute Node parentNode;
readonly attribute Document ownerDocument;
attribute DOMString textContent;
Node appendChild(in Node newChild)
raises(DOMException);
Node insertBefore(in Node newChild, in Node refChild)
raises(DOMException);
Node removeChild(in Node oldChild)
raises(DOMException);
Node cloneNode(in boolean deep);
};
namespaceURI. localName. parentNode. ownerDocument. textContent. appendChild. insertBefore. removeChild. cloneNode. This interface is a subset of the Element interface defined in DOM Level 3 Core ([DOM3], section 1.4).
Concerning setAttributeNS, there is no requirement to take the prefix into account since neither the prefix field nor the Attr interface are supported.
interface Element : Node, ElementTraversal
{
DOMString getAttributeNS(in DOMString namespaceURI, in DOMString localName)
raises(DOMException);
void setAttributeNS(in DOMString namespaceURI, in DOMString qualifiedName, in DOMString value)
raises(DOMException);
DOMString getAttribute(in DOMString name);
void setAttribute(in DOMString name, in DOMString value)
raises(DOMException);
};
getAttributeNS. setAttributeNS. getAttribute. setAttribute. This interface is a subset of the Document interface defined in DOM Level 3 Core ([DOM3], section 1.4).
interface Document : Node
{
Element createElementNS(in DOMString namespaceURI, in DOMString qualifiedName)
raises(DOMException);
readonly attribute Element documentElement;
Element getElementById(in DOMString elementId);
};
documentElement. createElementNS. getElementById.
interface ElementTraversal
{
readonly attribute Element firstElementChild;
readonly attribute Element lastElementChild;
readonly attribute Element nextElementSibling;
readonly attribute Element previousElementSibling;
readonly attribute unsigned long childElementCount;
};
firstElementChild. lastElementChild. nextElementSibling. previousElementSibling. childElementCount. Location objects provide a representation of their document's address.
interface Location
{
void assign(in DOMString iri);
void reload();
};
When this method is invoked, the user agent must navigate to the given IRI. The result of the traversal must be identical to the traversal caused by an 'a' hyperlink with the 'target' attribute set to '_replace'. The difference is that the 'a' hyperlink is activated on user interaction but assign is activated from script. The current document location is the IRI of the Document object pointed to by the AbstractView.document field. Relative IRI references are resolved based on the base IRI of the current document. If the base IRI differs from that of the current document, the current document is discarded, and loading and parsing of the document at the specified IRI then begins. If the previous step resulted in loading of a new document, the timeline is restarted and a new load event is fired. Note: For HTTP, a pragma:no-cache ([RFC2616], section 14.32) is not issued and thus a fresh copy from the server is not forced if there is a cache.
When this method is invoked, the user agent is forced to reload the resource identified by the Location. The current document location is the IRI of the Document object pointed to by the AbstractView.document field.
This is a subset of the de facto standard Window interface that many browsers implement. See Window Object 1.0 and The default view in HTML 5 for ongoing standardization efforts in this area at the time of writing [WINDOW, HTML5].
The Window interface described here includes only a single attribute, which can be used to access a parent Window object, if any. The Window interface must be implemented by the object that represents the default view of the document ([DOM2VIEWS], section 1.1). This object also implements AbstractView. Thus, in the ECMAScript language binding, the global script object implements Window. The Window object for a document can also be obtained through DocumentView::defaultView.
interface Window
{
readonly attribute Window parent;
readonly attribute Location location;
};
The Window object that is the parent view of this document's default view. If the Window has no notion of parent (e.g. if the document is displayed as the top level document in a viewer), then the value of this attribute is null.
The Location object that is for that Window object's active document.
SVG Tiny 1.2 requires complete DOM Level 2 Views support, which includes the AbstractView and DocumentView interfaces [DOM2VIEWS].
The SVG Tiny 1.2 uDOM does not provide access to any views of the document other than the default view. The default view is accessible through DocumentView::defaultView. Note that the default view is required to also implement the SVGGlobal interface. In the ECMAScript language binding, the global script object must also be the object that represents the default view.
This interface is a copy of the AbstractView interface from DOM Level 2 Views ([DOM2VIEWS], section 1.2), and must be implemented by the object that represents the the default view of the document. In the ECMAScript language binding, the global script object must implement this interface.
interface AbstractView
{
readonly attribute DocumentView document;
};
AbstractView::document in DOM Level 2 Views ([DOM2VIEWS], section 1.2). This interface is a copy of the DocumentView interface from DOM Level 2 Views ([DOM2VIEWS], section 1.2), and must be implemented by all Document objects.
interface DocumentView
{
readonly attribute AbstractView defaultView;
};
null if none available. The value of this attribute is the SVGGlobal object associated with the document. See DocumentView::defaultView in DOM Level 2 Views ([DOM2VIEWS], section 1.2). This interface is a subset of the EventTarget interface defined in DOM Level 2 Events ([DOM2EVENTS], section 1.3.1).
Please note that SVG Tiny 1.2 user - agents are not required to support the capture phase, and conformant SVG Tiny 1.2 content must not make use of it. If an attempt to specify event operations on the capture phase is made an SVG Tiny user - agent that does not support it must ignore them as if addEventListener had not been called. (See Event flow for details.)
As indicated in the DOM Level 2 Events definition for EventTarget, this interface is implemented by all Nodes.
Refer to the DOM Events Level 2 specification [DOM2EVENTS] or the XML Events [XML-EVENTS] specification introduction for an explanation of the SVG event flow and the meaning of event targets, event current target, bubble and capture.
interface EventTarget
{
void addEventListener(in DOMString type, in EventListener listener, in boolean useCapture);
void removeEventListener(in DOMString type, in EventListener listener, in boolean useCapture);
};
addEventListener. removeEventListener. The EventListener interface is
the primary way for handling events
implemented by script to handle an event. The interface can be implemented in ECMAScript by using a Function object (or by using an object with a handleEvent property), and in Java by implementing the interface directly. The EventListener object can then be registered as a listener using EventTarget::addEventListener.
This interface is identical to the EventListener interface defined in DOM Level 2 Events ([DOM2EVENTS], section 1.3.1).
interface EventListener
{
void handleEvent(in Event evt);
};
handleEvent. This interface is a subset of the Event interface defined in DOM Level 2 Events ([DOM2EVENTS, section 1.4), with one addition: the defaultPrevented attribute. This subset does not support the PhaseType definition group.
For a list of supported event types see the Complete list of supported events section of the Interactivity chapter.
interface Event
{
readonly attribute EventTarget target;
readonly attribute EventTarget currentTarget;
readonly attribute DOMString type;
readonly attribute boolean cancelable;
readonly attribute boolean defaultPrevented;
void stopPropagation();
void preventDefault();
};
target. currentTarget. type. cancelable. Event.preventDefault() has been called for this event. stopPropagation. preventDefault. Event types that are MouseEvents: click, mousedown, mouseup, mouseover, mousemove, mouseout.
This interface is a subset of the MouseEvent interface defined in DOM Level 2 Events ([DOM2EVENTS, section 1.6.2).
interface MouseEvent : UIEvent
{
readonly attribute long screenX;
readonly attribute long screenY;
readonly attribute long clientX;
readonly attribute long clientY;
readonly attribute unsigned short button;
};
screenX. screenY. clientX. clientY. button. Event types that are MouseWheelEvents: mousewheel.
This interface is a subset of the MouseWheelEvent interface defined in DOM Level 3 Events ([DOM3EVENTS], section 1.7.6), and inherits attributes from the MouseEvent interface defined in DOM Level 2 Events ([DOM2EVENTS], section 1.6.2).
interface MouseWheelEvent : MouseEvent
{
readonly attribute long wheelDelta;
};
textInput. This interface is a subset of the TextEvent interface defined in DOM Level 3 Events ([DOM3EVENTS], section 1.7.2).
interface TextEvent : UIEvent
{
readonly attribute DOMString data;
};
data holds the value of the characters generated by the character device. This may be a single Unicode character or a non-empty sequence of Unicode characters [UNICODE]. Characters should be normalized as defined by the to Unicode normalization form NFC, defined in Unicode Normalization Forms [UAX15]. This attribute cannot will not be null or contain an empty string.
Event types that are KeyboardEvents: keydown, keyup.
This interface is a subset of the KeyboardEvent interface defined in DOM Level 3 Events ([DOM3EVENTS], section 1.7.3).
interface KeyboardEvent : UIEvent
{
readonly attribute DOMString keyIdentifier;
};
keyIdentifier holds the identifier of the key. The key identifiers are defined in the "Key identifiers set", below. Implementations that are unable to identify a key must use the key identifier "Unidentified". This is a subset of the key identifiers defined in DOM Level 3 Events, and defines a snapshot of functionality currently implemented on mobile devices ([DOM3EVENTS], section A.2).
The list of key identifiers contained in this appendix section is not exhaustive and input devices may have to define their own key identifiers. It is expected that DOM Level 3 Events will define an algorithm to determine which key identifier to use. Future SVG specifications will defer to DOM Level 3 Events for a definitive treatment of keyboard events and key identifiers.
"U+0000", "U+0001", ..., "U+10FFFF" are Unicode-based key identifiers ( [UNICODE]). A user agent may treat string literal characters in content as Unicode codepoints for the purpose of key identification.
Event types that are UIEvents: DOMFocusIn, DOMFocusOut, DOMActivate, MouseEvent, TextEvent, KeyboardEvent,
This interface is a subset of the UIEvent interface defined in DOM Level 2 Events ([DOM2EVENTS, section 1.6.1).
interface UIEvent : Event
{
readonly attribute long detail;
};
detail. The ProgressEvents progress events defined here are intended to be a subset of the ProgressEvents those defined in Progress Events 1.0 [PROGRESSEVENTS].
Many resources, such as raster images, movies and complex SVG content can take a substantial amount of time to download. In some use cases the author would prefer to delay the display of content or the beginning of an animation until the entire content of a file has been downloaded. In other cases, the author may wish to give the viewer some feedback that a download is in progress (e.g. a loading progress screen).
The ProgressEvent occurs when the user agent makes progress loading a resource (external) referenced by an 'xlink:href' attribute.
The user agent must dispatch a ProgressEvent at the beginning of a load operation (i.e. just before starting to access the resource). This event is of type loadstart.
The user agent must dispatch a ProgressEvent at the end of a load operation (i.e. after load is complete and the user agent is ready to render the corresponding resource). This event is of type loadend.
The user agent may dispatch ProgressEvents between the loadstart event and the loadend events. Such events are of type progress.
Event types that are ProgressEvents: progress, loadstart, loadend.
interface ProgressEvent : Event
{
readonly attribute boolean lengthComputable;
readonly attribute unsigned long loaded;
readonly attribute unsigned long total;
};
loadstart or loadend event. progress event, it should specify the total number of bytes expected.
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events"
version="1.2" baseProfile="tiny" width="300" height="430">
<script><![CDATA[
function showImage(imageHref) {
var image = document.getElementById('myImage');
image.setTraitNS("http://www.w3.org/1999/xlink", "href", imageHref);
}
function imageLoadStart(evt) {
var progressBar = document.getElementById('progressBar');
var loadingAnimation = document.getElementById('loadingAnimation');
progressBar.setFloatTrait("width", 0);
loadingAnimation.beginElement();
}
function imageLoadProgress(evt) {
if (evt.lengthComputable) {
var progressBar = document.getElementById('progressBar');
progressBar.setFloatTrait("width", 100 * (evt.loaded / evt.total));
progressBar.setTrait("display", "inline");
}
}
function imageLoadComplete(evt) {
var progressBar = document.getElementById('progressBar');
var loadingAnimation = document.getElementById('loadingAnimation');
progressBar.setTrait("display", "none");
loadingAnimation.endElement();
}
]]></script>
<image xml:id="myImage" xlink:href="imageA.png" width="300" height="400">
<handler ev:event="loadstart">
imageLoadStart(evt);
</handler>
<handler ev:event="progress">
imageLoadProgress(evt);
</handler>
<handler ev:event="loadend">
imageLoadComplete(evt);
</handler>
</image>
<rect rx="4" x="50" y="400" width="200" height="30" cursor="pointer">
<handler ev:event="click">
showImage('imageB.png');
</handler>
</rect>
<text x="150" y="420" font-size="15" fill="white" text-anchor="middle"
text-decoration="underline" pointer-events="none">
Load other image
</text>
<g display="none">
<rect x="100" y="300" height="10" width="100" fill="black"/>
<rect xml:id="progressBar" x="100" y="300" width="50" height="10" fill="lime"/>
</g>
<text x="150" y="330" font-size="15" text-anchor="middle" display="none">
Loading...
<animate xml:id="loadingAnimation" attributeName="display"
begin="indefinite" dur="2s" repeatDur="indefinite"
calcMode="discrete" values="inline; none"/>
</text>
</svg>
This interface is a subset of the ElementTimeControl interface defined in SMIL Animation [SMILANIM].
Contains a single subsetted interface from the SMIL APIs.This interface defines common methods for elements which define animation behaviors compatible with SMIL (
Timed Elementstimed elements and the 'svg' element).
This interface is a subset of the ElementTimeControl interface defined in SMIL Animation [SMILANIM].
Note: See the SVGTimedElement interface for pause functionality.
interface ElementTimeControl
{
void beginElementAt(in float offset);
void beginElement();
void endElementAt(in float offset);
void endElement();
};
| in float offset | The offset in seconds at which to begin the element. |
beginElementAt(0). | in float offset | The offset in seconds at which to end the element. |
endElementAt(0). TimeEvent is an interface used to provide contextual information for events fired by animations in the document. It is a subset of the TimeEvent interface defined in SMIL Animation ([SMILANIM], section 6.2).
Event that is fired by all Timed Elements timed elements.
Event types that are TimeEvents: beginEvent, endEvent, repeatEvent.
interface TimeEvent : Event
{
readonly attribute long detail;
};
beginEvent and endEvent the detail field is not used. For repeatEvent the detail field contains the current repeat iteration.
This interface is identical to SVGException interface defined in SVG 1.1 ([SVG11], section B.3).
exception SVGException
{
unsigned short code;
};
// ExceptionCode
const unsigned short SVG_WRONG_TYPE_ERR = 0;
const unsigned short SVG_INVALID_VALUE_ERR = 1;
const unsigned short SVG_MATRIX_NOT_INVERTABLE = 2;
interface SVGDocument : Document, EventTarget
{
};
interface SVGUseElement : SVGLocatableElement
{
};
This interface is a subset of the SVGElementInstance interface defined in SVG 1.1 ([SVG11], section 5.17).
interface SVGElementInstance : EventTarget
{
readonly attribute SVGElement correspondingElement;
readonly attribute SVGElementSVGUseElement correspondingUseElement;
};
correspondingElement. correspondingUseElement. In the example below, three 'use' elements use the same 'rect' element. Each 'use' has different 'fill' properties that are inherited down to the used 'rect'. The result is three 'rect' elements with different 'fill' colors. Clicking one of these three 'rect' elements will cause a fourth 'rect' to change color to match the clicked one. Worth noticing is that if the original 'rect' had not been in the 'defs' element the script would
go into errorthrow an exception when the original 'rect' is clicked. This is because the
' 'attribute would return an
' 'that doesn't have the
' 'attribute.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"> version="1.2" baseProfile="tiny" <defs> width="640" height="480" viewBox="0 0 640 480"> <defs> <rect xml:id="r1" width="90" height="65"/> </defs> <use xlink:href="#r1" x="50" y="200" fill="red"/> <use xlink:href="#r1" x="250" y="200" fill="blue"/> <use xlink:href="#r1" x="450" y="200" fill="green"/> <rect xml:id="r2" x="250" y="50" width="90" height="65"/> <ev:listener observer="r1" event="ev:click" handler="#handler"/> <handler xml:id="handler" type="application/ecmascript">changeColor(evt);</handler> <script type="application/ecmascript"> <![CDATA[ var target = document.getElementById("r2"); function changeColor(evt) { var useElement = evt.currentTarget.correspondingUseElement; target.setRGBColorTrait("fill", useElement.getRGBColorTrait("fill")); } ]]> </script> </svg>
This interface represents the 'svg' element in the ( SVG ) document tree.
The uDOM attributes currentScale, currentRotate and currentTranslate are combined to form a user agent transformation which is applied at the outermost level on the SVG document (i.e. outside the 'svg' element). Their values can potentially be modified through user agent specific UI, if "magnification" is enabled (i.e., 'zoomAndPan' attribute is set to magnify). Their values can potentially be modified through user-agent specific UI. User agent transformation can be obtained by multiplying the matrix
[currentScale 0 currentTranslate.x] [cos(currentRotate) -sin(currentRotate 0] [ 0 currentScale currentTranslate.y] by [sin(currentRotate) cos(currentRotate) 0] [ 0 0 1 ] [ 0 0 1]
i.e. ( That is, translate, then scale, then rotate the coordinate system). The reference point for scale and rotate operations is the origin (0, 0).
interface SVGSVGElement : SVGLocatableElement, SVGTimedElement
{
const unsigned short NAV_AUTO = 1;
const unsigned short NAV_NEXT = 2;
const unsigned short NAV_PREV = 3;
const unsigned short NAV_UP = 4;
const unsigned short NAV_UP_RIGHT = 5;
const unsigned short NAV_RIGHT = 6;
const unsigned short NAV_DOWN_RIGHT = 7;
const unsigned short NAV_DOWN = 8;
const unsigned short NAV_DOWN_LEFT = 9;
const unsigned short NAV_LEFT = 10;
const unsigned short NAV_UP_LEFT = 11;
attribute float currentScale;
attribute float currentRotate;
readonly attribute SVGPoint currentTranslate;
readonly attribute SVGRect viewport;
float getCurrentTime();
void setCurrentTime(in float seconds);
SVGMatrix createSVGMatrixComponents(in float a, in float b, in float c, in float d, in float e,
in float f);
SVGRect createSVGRect();
SVGPoint createSVGPoint();
SVGPath createSVGPath();
SVGRGBColor createSVGRGBColor(in float red, in float green, in float blue)
raises(SVGException);
void moveFocus(in unsigned short motionType)
raises(DOMException);
void setFocus(in EventTarget theObject)
raises(DOMException);
EventTarget getCurrentFocusedObject();
};
currentScale is 1. On write: Sets the current user agent scale (zoom) coefficient.
currentRotate is 0. On write: Sets the
x and y components will change the user agent's translation). The initial values for currentTranslate is an SVGPoint object with the value (0, 0). The position and size of the viewport (implicit or explicit) that corresponds to this 'svg' element. When the user agent is actually rendering the content, then the position and size values represent the actual values when rendering.
If this SVG document is embedded as part of another document (e.g., via the HTML 'object' element), then the position and size are unitless values in the coordinate system of the parent document. (If the parent uses CSS or XSL layout, then unitless values represent pixel units for the current CSS or XSL viewport, as described in the CSS2 CSS 2 specification.) If the parent element does not have a coordinate system, then the user agent should provide reasonable default values for this attribute.
For stand-alone SVG documents, both 'x' and 'y' must be zero, the 'width' must be the width of the viewport which the host environment provides to the SVG user agent into which it can render its content, and the 'height' must be the height of the viewport, with all values expressed in the pixel coordinate system from the host environment, preferably such that this pixel coordinate system matches the same pixel coordinate system presented to HTML and matches the model for pixel coordinates described in the CSS2 CSS 2 specification. Note that "pixel coordinate systems" are host-specific. Two possible approaches that hosts might use for pixel coordinate systems are actual device pixels or (particularly for high-resolution devices) pseudo device pixels which exactly match SVG and CSS's "px" coordinates.
The object itself and its contents are both readonly. A DOMException with error code NO_MODIFICATION_ALLOWED_ERR is raised if an attempt is made to modify it. The returned SVGRect object is "live", i.e. its x, y, width, and height is attributes are automatically updated if the viewport size or position changes.
Returns the document time in seconds.
If getCurrentTime is called before the document timeline has begun (for example, by script running in a 'script' element before the rootmost 'svg' element's load event is dispatched, when 'playbackOrder' is set to 'onLoad'), then 0 is returned.
| float | The current document time, in seconds, or 0 if the document timeline has not yet begun. |
Sets the document time (in seconds). This API is required to support seeking forwards and backwards in the timeline. After a seek, animation continues to play (forwards) from the new time. If seconds is negative, then the document will seek to time 0s.
If setCurrentTime is called before the document timeline has begun (for example, by script running in a 'script' element before the rootmost 'svg' element's load event is dispatched, when 'playbackOrder' is set to 'onLoad'), then the value of seconds in the most recent invocation of the method gives the time that the document time will be seeked to once the document timeline has begun.
| in float seconds | The document time to seek to, in seconds. |
setMatrixTrait method. The internal representation of the matrix is as follows: [ a c e ] [ b d f ] [ 0 0 1 ]
| in float a | The 'a' component of the matrix to be set. |
| in float b | The 'b' component of the matrix to be set. |
| in float c | The 'c' component of the matrix to be set. |
| in float d | The 'd' component of the matrix to be set. |
| in float e | The 'e' component of the matrix to be set. |
| in float f | The 'f' component of the matrix to be set. |
setRectTrait method. The initial values for x, y, width, and height of this new SVGRect are zero. x and y of this new SVGPoint are zero. setPathTrait method. setRGBColorTrait method. The parameters are floats, one per color component. 0.0 represents zero intensity and 255.0 represents full intensity of a given color component. Colors originally in the rgb(%,%,%) syntax may have fractional components. Out of gamut colors may have component values less than 0.0 or greater than 255.0. | in float red | The red component of the SVGRGBColor. |
| in float green | The green component of the SVGRGBColor. |
| in float blue | The blue component of the SVGRGBColor. |
| SVGRGBColor | The created SVGRGBColor. |
motionTypethe parameter. The user agent must take into account the currently focused object in the document in order to find the new focused object. If this method succeeds:
DOMFocusOut event must be dispatched which has the previously focused object as the event target.DOMFocusIn event must dispatched which has the the new focused object as the event target.
A reference to the new focused object can be obtained using the EventTarget interface of the generated DOMFocusIn event.
Refer to the navigation section
to seefor a description of how navigation is managed. The behavior for this method must be the same as if an equivalent move was done by the end user (for example by using a joystick or
TAB keyspressing the Tab key) and not by scripting.
Whenever the method fails (
i.e.
that is, when a DOMException is raised), focus must stay on the currently focused object and no DOMFocusOut/DOMFocusIn event is dispatched.
Note: For stand-alone SVG documents, the user agent must always have a currently focused object. At the beginning, the SVGDocument has focus.
| in short motionType | The type of motion. |
| DOMException |
NOT_SUPPORTED_ERR: Raised if the requested motion type is not supported (i.e. not one of the interface constants).
|
|
| DOMException |
INVALID_ACCESS_ERR: Raised if the currently focused object doesn't have a navigation attribute value corresponding to the requested motion type. For instance, if a
moveFocus(NAV_UP) is called on an element which has no 'nav-up' attribute. |
|
| DOMException |
INVALID_STATE_ERR: Raised if the currently focused object has a navigation attribute value corresponding to the requested motion type but the target indicated in this attribute can not be found or is not a focusable object. For instance, if a
moveFocus(NAV_UP) is called on an object which has a 'nav-up' attribute but the value of this attribute references an element which is not focusable. |
If this method succeeds:
DOMFocusOut event must be dispatched which has the previously focused object as the event target.DOMFocusIn event must be dispatched which has the the new focused object as the event target.A reference to the
new
newly focused object can be obtained using the EventTarget interface of the generated DOMFocusIn event.
Whenever the method fails (
i.e.
that is, when a DOMException is raised), focus must stay on the currently focused object and no DOMFocusOut
or DOMFocusIn event is dispatched.
Note: For stand-alone SVG documents, the user agent must always have a currently focused object. At the beginning, the SVGDocument has focus.
| in EventTarget theObject | The object which should receive focus. |
| DOMException |
NOT_SUPPORTED_ERR: Raised if the in parameter is not a Node or SVGElementInstance, or if the requested element is not focusable (i.e. its 'focusable' attribute does not evaluate to
trueindicates that the element is not focusable). |
| EventTarget | object | The currently focused object. |
getRGBColorTrait) such as 'fill', 'stroke', and 'color'.
interface SVGRGBColor
{
attribute unsigned long red;
attribute unsigned long green;
attribute unsigned long blue;
};
This interface is identical to SVGRect interface defined in SVG 1.1 ([SVG11], section 4.3).
interface SVGRect
{
attribute float x;
attribute float y;
attribute float width;
attribute float height;
};
This interface is identical to SVGPoint interface defined in SVG 1.1 ([SVG11], section 4.3).
interface SVGPoint
{
attribute float x;
attribute float y;
SVGPoint matrixTransform(in SVGMatrix matrix);
};
matrixTransform. Path data created or modified using this interface must be normalized as per the rules given in Path Normalization. However, path data that is just queried need not be normalized.
interface SVGPath
{
const unsigned short MOVE_TO = 77;
const unsigned short LINE_TO = 76;
const unsigned short CURVE_TO = 67;
const unsigned short QUAD_TO = 81;
const unsigned short CLOSE = 90;
readonly attribute unsigned long numberOfSegments;
unsigned short getSegment(in unsigned long cmdIndex)
raises(DOMException);
float getSegmentParam(in unsigned long cmdIndex, in unsigned long paramIndex)
raises(DOMException);
void moveTo(in float x, in float y);
void lineTo(in float x, in float y);
void quadTo(in float x1, in float y1, in float x2, in float y2);
void curveTo(in float x1, in float y1, in float x2, in float y2, in float x3, in float y3);
void close();
};
| in unsigned long cmdIndex | The command index for the segment command to retrieve. |
| unsigned short | The segment command. One of MOVE_TO, LINE_TO, CURVE_TO, QUAD_TO or CLOSE. |
| DOMException |
INDEX_SIZE_ERR: Raised if the segment index is out of bounds or param index is out of bounds for this segment's type.
|
| in unsigned long cmdIndex | The command index for the segment command. |
| in unsigned long paramIndex | The parameter index to retrieve. |
| float | The segment parameter. |
| DOMException |
INDEX_SIZE_ERR: Raised if the segment index is out of bounds, or param the parameter index is out of bounds for this the specified segment's type.
|
| in float x | The x-axis coordinate for the specified point. |
| in float y | The y-axis coordinate for the specified point. |
| in float x | The x-axis coordinate for the specified point. |
| in float y | The y-axis coordinate for the specified point. |
| in float x1 | The x-axis coordinate of the first control point. |
| in float y1 | The y-axis coordinate of the first control point. |
| in float x2 | The x-axis coordinate of the final end point. |
| in float y2 | The y-axis coordinate of the final end point. |
| in float x1 | The x-axis coordinate of the first control point. |
| in float y1 | The y-axis coordinate of the first control point. |
| in float x2 | The x-axis coordinate of the second end point. |
| in float y2 | The y-axis coordinate of the second end point. |
| in float x3 | The x-axis coordinate of the final end point. |
| in float y3 | The y-axis coordinate of the final end point. |
Note: The mTranslate, inverse, mMultiply, mScale and mRotate methods in this interface mutate the SVGMatrix object and return a reference to the SVGMatrix instance itself, after performing the necessary matrix operation.
This matrix transforms source coordinates (x, y) into destination coordinates (x', y') by considering them to be a column vector and multiplying the coordinate vector by the matrix according to the following process:
[ x' ] [ a c e ] [ x ] [ a.x + c.y + e ]
[ y' ] = [ b d f ] [ y ] = [ b.x + d.y + f ]
[ 1 ] [ 0 0 1 ] [ 1 ] [ 1 ]
interface SVGMatrix
{
float getComponent(in unsigned long index)
raises(DOMException);
SVGMatrix mMultiply(in SVGMatrix secondMatrix);
SVGMatrix inverse()
raises(SVGException);
SVGMatrix mTranslate(in float x, in float y);
SVGMatrix mScale(in float scaleFactor);
SVGMatrix mRotate(in float angle);
};
getComponent(0) is a, getComponent(1) is b, etc. | in unsigned long index | The index of the matrix component to retrieve. |
| float | The matrix component. |
| DOMException |
INDEX_SIZE_ERR: Raised if the
index is invalid (i.e., outside the range [0, 5]).
|
| in SVGMatrix secondMatrix | The matrix to post-multiply with. |
| SVGMatrix | The resulting current matrix. |
| SVGMatrix | The inverse of the current matrix. |
| SVGException |
SVG_MATRIX_NOT_INVERTABLE: Raised when the determinant of this matrix is zero.
|
mMultiply(T), where T is an SVGMatrix object represented by the following matrix:
[ 1 0 x ]
[ 0 1 y ]
[ 0 0 1 ]
| in float x | The distance by which coordinates are translated in the X x-axis direction. |
| in float y | The distance by which coordinates are translated in the Y y-axis direction. |
| SVGMatrix | The resulting current matrix. |
mMultiply(S), where S is an SVGMatrix object represented by the following matrix:
[ scaleFactor 0 0 ]
[ 0 scaleFactor 0 ]
[ 0 0 1 ]
| in float scaleFactor | The factor by which coordinates are scaled along the X x- and Y y-axis. |
| SVGMatrix | The resulting current matrix. |
mMultiply(R), where R is an SVGMatrix object represented by the following matrix:
[ cos(angle) -sin(angle) 0 ]
[ sin(angle) cos(angle) 0 ]
[ 0 0 1 ]
| in float angle | The angle of rotation in degrees. |
| SVGMatrix | The resulting current matrix. |
interface SVGLocatable
{
SVGRect getBBox();
SVGMatrix getScreenCTM();
SVGRect getScreenBBox();
};
| SVGRect | The bounding box. The returned object is a copy of the current bounding box value and will not change if the corresponding bounding box changes. |
clientX and clientY coordinates of a MouseEvent are in the initial viewport coordinate system. Note that null is returned if this element is not hooked into the document tree. This method would have been more aptly named as getClientCTM, but the name getScreenCTM is kept for historical reasons. Also note that getScreenCTM reflects a snapshot of the current animated state, i.e. if one or several transforms that affect the element that getScreenCTM is called upon are animated then the returned transformation matrix reflects the current state of each such animated transform when calculating the returned matrix. | SVGMatrix | The transformation matrix. The returned object is a copy of the current screen CTM value and will not change if the corresponding screen CTM changes. |
SVGLocatable::getScreenCTM method.| SVGRect | The bounding box in screen coordinate space. The returned object is a copy of the current screen bounding box value and will not change if the corresponding screen bounding box changes. |
The following examples further clarify the behavior of the getBBox() method. The examples have a short explanation, an SVG fragment and are followed by a set of bounding box values which have the following format:
[elementId] : {x, y, width, height} | {null}
where x, y, width and height define the values of the SVGRect object's objects returned from a getBBox call on the element with the specified idID. There are a few cases where the bounding box may be null (see example 6).
getBBox method for various simple basic shapes and groups. In particular, it shows that the transform, on an element, does not change the value of its user space bounding box.
<g xml:id="group1" transform="translate(10, 20)" fill="red">
<rect xml:id="rect1" transform="scale(2)" x="10" y="10" width="50" height="50"/>
<rect xml:id="rect2" x="10" y="10" width="100" height="100"/>
<g xml:id="group2" transform="translate(10, 20)">
<rect xml:id="rect3" x="0" y="10" width="150" height="50"/>
<circle xml:id="circle1" cx="20" cy="20" r="100" />
</g>
</g>
Result:
[group1] : {-70.0, -60.0, 230.0, 200.0}
[rect1] : {10.0, 10.0, 50.0, 50.0}
[rect2] : {10.0, 10.0, 100.0, 100.0}
[group2] : {-80.0, -80.0, 230.0, 200.0}
[rect3] : {0.0, 10.0, 150.0, 50.0}
[circle1] : {-80.0, -80.0, 200.0, 200.0}
<g xml:id="group1" transform="translate(10, 20)" fill="red">
<rect xml:id="rect2" x="10" y="10" width="400" height="0"/>
<g xml:id="group2" transform="translate(10, 20)">
<rect xml:id="rect3" x="0" y="10" width="150" height="50"/>
</g>
</g>
Result:
[group1] : {10.0, 10.0, 400.0, 70.0}
[rect2] : {10.0, 10.0, 400.0, 0.0}
[group2] : {0.0, 10.0, 150.0, 50.0}
[rect3] : {0.0, 10.0, 150.0, 50.0}
<svg xml:id="mySVG" version="1.2" baseProfile="tiny" width="10" height="20">
<g xml:id="group1" transform="translate(10, 20)" fill="red">
<rect xml:id="rect1" x="10" y="10" width="100" height="100"/>
<ellipse xml:id="ellipse1" cx="20" cy="20" rx="0" ry="70" />
</g>
</svg>
Result:
[mySVG] : {20.0, -30.0, 100.0, 160.0}
[group1] : {10.0, -50.0, 100.0, 160.0}
[rect1] : {10.0, 10.0, 100.0, 100.0}
[ellipse1] : {20.0, -50.0, 0.0, 140.0}
<svg xml:id="mySVG" version="1.2" baseProfile="tiny" width="0" height="50">
<g xml:id="group1" transform="translate(10, 20)" fill="red" >
<rect xml:id="rect1" x="10" y="10" width="50" height="50"/>
<g xml:id="group2" transform="translate(10, 20)">
<rect xml:id="rect2" x="0" y="10" width="150" height="0"/>
<circle xml:id="circle1" cx="20" cy="20" r="500"/>
</g>
</g>
</svg>
Result:
[mySVG] : {-460.0, -440.0, 1000.0, 1000.0}
[group1] : {-470.0, -460.0, 1000.0, 1000.0}
[rect1] : {10.0, 10.0, 50.0, 50.0}
[group2] : {-480.0, -480.0, 1000.0, 1000.0}
[rect2] : {0.0, 10.0, 150.0, 0.0}
[circle1] : {-480.0, -480.0, 1000.0, 1000.0}
<svg version="1.2" baseProfile="tiny">
<defs>
<rect xml:id="myRect" x="0" y="0" width="60" height="40"/>
</defs>
<use xml:id="myUse" xlink:href="#myRect" x="-30" y="-20"/>
</svg>
Result:
[myRect] : {0.0, 0.0, 60.0, 40.0}
[myUse] : {-30.0, -20.0, 60.0, 40.0}