# SVG动画入门（二）

## Usage context

Categories Animation timing attribute No 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

```<?xml version="1.0"?>
<svg width="120" height="120"  viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg" version="1.1">

<rect x="10" y="35" height="15" width="0">
<animate attributeType="XML"
attributeName="width"
to="100"
dur="8s"
begin="0s"
fill="freeze" />
</rect>

<rect x="35" y="60" height="15" width="0">
<animate attributeType="XML"
attributeName="width"
to="75"
dur="6s"
begin="2s"
fill="freeze" />
</rect>

<rect x="60" y="85" height="15" width="0">
<animate attributeType="XML"
attributeName="width"
to="50"
dur="4s"
begin="4s"
fill="freeze" />
</rect>

<!-- steps -->

<text x="10" y="20" text-anchor="middle">0s</text>
<line x1="10" y1="25" x2="10" y2="105" stroke="grey" stroke-width=".5" />
<text x="35" y="20" text-anchor="middle">2s</text>
<line x1="35" y1="25" x2="35" y2="105" stroke="grey" stroke-width=".5" />
<text x="60" y="20" text-anchor="middle">4s</text>
<line x1="60" y1="25" x2="60" y2="105" stroke="grey" stroke-width=".5" />
<text x="85" y="20" text-anchor="middle">6s</text>
<line x1="85" y1="25" x2="85" y2="105" stroke="grey" stroke-width=".5" />
<text x="110" y="20" text-anchor="middle">8s</text>
<line x1="110" y1="25" x2="110" y2="105" stroke="grey" stroke-width=".5" />

<line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
<line x1="10" y1="105" x2="110" y2="105" stroke="grey" stroke-width=".5" />
</svg>```

### Syncbase example

```<?xml version="1.0"?>
<svg width="120" height="120"  viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg" version="1.1"

<rect x="10" y="35" height="15" width="0">
<animate id="first"
attributeType="XML"
attributeName="width"
to="50"
dur="4s"
begin="0s;third.end" />
</rect>

<rect x="60" y="60" height="15" width="0">
<animate id="second"
attributeType="XML"
attributeName="width"
to="25"
dur="2s"
begin="first.end" />
</rect>

<rect x="85" y="85" height="15" width="0">
<animate id="third"
attributeType="XML"
attributeName="width"
to="25"
dur="2s"
begin="second.end" />
</rect>

<!-- steps -->

<text x="10" y="20" text-anchor="middle">0s</text>
<line x1="10" y1="25" x2="10" y2="105" stroke="grey" stroke-width=".5" />
<text x="35" y="20" text-anchor="middle">2s</text>
<line x1="35" y1="25" x2="35" y2="105" stroke="grey" stroke-width=".5" />
<text x="60" y="20" text-anchor="middle">4s</text>
<line x1="60" y1="25" x2="60" y2="105" stroke="grey" stroke-width=".5" />
<text x="85" y="20" text-anchor="middle">6s</text>
<line x1="85" y1="25" x2="85" y2="105" stroke="grey" stroke-width=".5" />
<text x="110" y="20" text-anchor="middle">8s</text>
<line x1="110" y1="25" x2="110" y2="105" stroke="grey" stroke-width=".5" />

<line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
<line x1="10" y1="105" x2="110" y2="105" stroke="grey" stroke-width=".5" />
</svg>```

### Event example

```<?xml version="1.0"?>
<svg width="120" height="120"  viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg" version="1.1"

<rect x="10" y="35" height="15" width="0">
<animate begin="startButton.click"
attributeType="XML"
attributeName="width"
from="0"
to="100"
dur="8s"
fill="freeze" />
</rect>

<rect id="startButton" style="cursor:pointer;"
x="19.5" y="62.5" rx="5" height="25" width="80"
fill="#EFEFEF" stroke="black" stroke-width="1" />

<text x="60" y="80" text-anchor="middle"
style="pointer-events:none;">Click me.</text>

<!-- steps -->

<text x="10" y="20" text-anchor="middle">0s</text>
<line x1="10" y1="25" x2="10" y2="55" stroke="grey" stroke-width=".5" />
<text x="35" y="20" text-anchor="middle">2s</text>
<line x1="35" y1="25" x2="35" y2="55" stroke="grey" stroke-width=".5" />
<text x="60" y="20" text-anchor="middle">4s</text>
<line x1="60" y1="25" x2="60" y2="55" stroke="grey" stroke-width=".5" />
<text x="85" y="20" text-anchor="middle">6s</text>
<line x1="85" y1="25" x2="85" y2="55" stroke="grey" stroke-width=".5" />
<text x="110" y="20" text-anchor="middle">8s</text>
<line x1="110" y1="25" x2="110" y2="55" stroke="grey" stroke-width=".5" />

<line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
<line x1="10" y1="55" x2="110" y2="55" stroke="grey" stroke-width=".5" />
</svg>```

### Repeat example

```<?xml version="1.0"?>
<svg width="120" height="120"  viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg" version="1.1"

<rect x="10" y="35" height="15" width="0">
<animate id="myLoop"
begin="0s;myLoop.end"
attributeType="XML"
attributeName="width"
from="0"
to="100"
dur="4s"
repeatCount="3" />

<set begin="myLoop.begin"
attributeType="CSS"
attributeName="fill"
to="green" />

<set begin="myLoop.repeat(1)"
attributeType="CSS"
attributeName="fill"
to="gold" />

<set begin="myLoop.repeat(2)"
attributeType="CSS"
attributeName="fill"
to="red" />
</rect>

<!-- steps -->

<text x="10" y="20" text-anchor="middle">0s</text>
<line x1="10" y1="25" x2="10" y2="55" stroke="grey" stroke-width=".5" />
<text x="35" y="20" text-anchor="middle">1s</text>
<line x1="35" y1="25" x2="35" y2="55" stroke="grey" stroke-width=".5" />
<text x="60" y="20" text-anchor="middle">2s</text>
<line x1="60" y1="25" x2="60" y2="55" stroke="grey" stroke-width=".5" />
<text x="85" y="20" text-anchor="middle">3s</text>
<line x1="85" y1="25" x2="85" y2="55" stroke="grey" stroke-width=".5" />
<text x="110" y="20" text-anchor="middle">4s</text>
<line x1="110" y1="25" x2="110" y2="55" stroke="grey" stroke-width=".5" />

<line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
<line x1="10" y1="55" x2="110" y2="55" stroke="grey" stroke-width=".5" />
</svg>```

### Accesskey example

```<?xml version="1.0"?>
<svg width="120" height="120"  viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg" version="1.1"

<rect x="10" y="35" height="15" width="0">
<animate begin="accessKey(s)"
attributeType="XML"
attributeName="width"
from="0"
to="100"
dur="8s"
fill="freeze" />
</rect>

<text x="60" y="80" text-anchor="middle"
style="pointer-events:none;">Hit the "s" key</text>

<!-- steps -->

<text x="10" y="20" text-anchor="middle">0s</text>
<line x1="10" y1="25" x2="10" y2="55" stroke="grey" stroke-width=".5" />
<text x="35" y="20" text-anchor="middle">2s</text>
<line x1="35" y1="25" x2="35" y2="55" stroke="grey" stroke-width=".5" />
<text x="60" y="20" text-anchor="middle">4s</text>
<line x1="60" y1="25" x2="60" y2="55" stroke="grey" stroke-width=".5" />
<text x="85" y="20" text-anchor="middle">6s</text>
<line x1="85" y1="25" x2="85" y2="55" stroke="grey" stroke-width=".5" />
<text x="110" y="20" text-anchor="middle">8s</text>
<line x1="110" y1="25" x2="110" y2="55" stroke="grey" stroke-width=".5" />

<line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
<line x1="10" y1="55" x2="110" y2="55" stroke="grey" stroke-width=".5" />
</svg>```

## Elements

The following elements can use the `begin` attribute: