mozilla
Your Search Results

    begin Redirect 1

    « SVG Attribute reference home

    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.

    Usage context

    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:

    <offset-value>
    A Clock-value that represents a point in time relative to the beginning of the SVG document (usually the load or DOMReady event). Negative values are valid.
    <syncbase-value>
    Describes a syncbase and an optional offset from that syncbase. The element's animation start time is defined relative to the begin or active end of another animation. A syncbase consists of an ID reference to another animation element followed by either .begin or .end to identify whether to synchronize with the beginning or active end of the referenced animation element.
    <event-value>
    Describes an event and an optional offset that determines the time at which the element's animation should begin. The animation start time is defined relative to the time that the specified event is fired. A valid event-value consists of an element ID followed by a dot and one of the supported events for that element. All the valid events (not necessarily supported by all elements) are: 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.
    <repeat-value>
    Describes a qualified repeat event. The element animation start time is defined relative to the time that the repeat event is raised with the specified iteration value.
    <accessKey-value>
    Describes an accessKey that should trigger the animation. The element animation will begin when the user presses the specified key.
    <wallclock-sync-value>
    Describes the animation start time as a real-world clock time. The time syntax is based upon the syntax defined in ISO8601.

    Examples

    Offset example

    Source code Output result

    Unable to find file begin-1-offset.svg

    Unable to find file begin-1-offset.svg

    » begin-1-offset.svg

    Syncbase example

    Source code Output result

    Unable to find file begin-2-syncbase.svg

    Unable to find file begin-2-syncbase.svg

    » begin-2-syncbase.svg

    Event example

    Source code Output result

    Unable to find file begin-3-event.svg

    Unable to find file begin-3-event.svg

    » begin-3-event.svg

    Repeat example

    Source code Output result

    Unable to find file begin-4-repeat.svg

    Unable to find file begin-4-repeat.svg

    » begin-4-repeat.svg

    Accesskey example

    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.

    » begin-5-accesskey.svg

    Elements

    The following elements can use the begin attribute:

    Document Tags and Contributors

    Contributors to this page: Jeremie
    Last updated by: Jeremie,