This attribute defines when an animation should begin.
The attribute value is a semicolon separated list of values. The interpretation of a list of start times is detailed in the SMIL specification in "Evaluation of begin and end time lists". Each individual value can be one of the following : <offset-value>, <syncbase-value>, <event-value>, <repeat-value>, <accessKey-value>, <wallclock-sync-value> or the keyword indefinite.
| Categories | Animation timing attribute |
|---|---|
| Value | <begin-value-list> |
| Animatable | No |
| Normative document | SVG 1.1 (2nd Edition) |
Each value from the <begin-value-list> can be one of the following:
load or DOMReady event). Negative values are valid..begin or .end to identify whether to synchronize with the beginning or active end of the referenced animation element.focusin, focusout, activate, click, mousedown, mouseup, mouseover, mousemove, mouseout, DOMSubtreeModified, DOMNodeInserted, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMNodeInsertedIntoDocument, DOMAttrModified, DOMCharacterDataModified, SVGLoad, SVGUnload, SVGAbort, SVGError, SVGResize, SVGScroll, SVGZoom, beginEvent, endEvent and repeatEvent.accessKey that should trigger the animation. The element animation will begin when the user presses the specified key.| Source code | Output result |
|---|---|
Unable to find file begin-1-offset.svg | Unable to find file begin-1-offset.svg |
| Source code | Output result |
|---|---|
Unable to find file begin-2-syncbase.svg | Unable to find file begin-2-syncbase.svg |
| Source code | Output result |
|---|---|
Unable to find file begin-3-event.svg | Unable to find file begin-3-event.svg |
| Source code | Output result |
|---|---|
Unable to find file begin-4-repeat.svg | Unable to find file begin-4-repeat.svg |
| Source code | Output result |
|---|---|
Unable to find file begin-5-accesskey.svg |
Unable to find file begin-5-accesskey.svg This example is embed in an iFrame, if you want to activate the key events, you have to click on it first. |
The following elements can use the begin attribute:
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/begin