« SVG属性参考主页
这个属性定义了动画何时开始。
这个属性值是一个分号分隔的数列值。SMIL规范的"Evaluation of begin and end time lists"章节详细解释了开始时间数列。每个单独的值可以是下述之一：<offset-value>、 <syncbase-value>、 <event-value>、 <repeat-value>、 <accessKey-value>、 <wallclock-sync-value>或者关键词indefinite。
用法
<begin-value-list>中的每一个值可以是下述之一：
- <offset-value>
- 一个时钟值代表了一个相对于SVG文档开头的时间点，SVG文档开头通常是指load事件或者DOMReady事件触发的时间点。负值是合法的。
- <syncbase-value>
- 描述一个syncbase以及一个可选的来自于syncbase的时偏移。元素的动画开始时间被定义为相对于另一个动画的开头或者激活结束。一个ID及其后面跟着的.begin或.end构成了一个syncbase，ID引用到另一个动画元素，.begin或.end用来确定到底是与引用的动画元素的动画开头同步、 还是与引用的动画元素的动画激活结束同步。
- <event-value>
- 描述了一个事件以及一个可选的时偏移，用来确定动画开始的时点。触发指定事件的时点，被定义为动画开始的时点。一个元素ID及其后面跟着的一个点及其后面跟着事件名构成了一个合法的event-value值。事件名必须是元素支持的事件名。全部合法的事件（不一定是所有元素都支持的事件）包括这些：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和repeatEvent。
- <repeat-value>
- 描述了一个符合条件重复事件。repeat事件发生了指定次数的时间点，被定义为元素动画的开始时间点。
- <accessKey-value>
- 描述了一个用来触发动画的访问键。当用户按下指定的键时，元素动画就开始了。
- <wallclock-sync-value>
- 描述了一个动画开始时间，是真实世界钟的时点。时点的句法遵守ISO8601定义的句法。
示例
Offset示例
| 源代码 |
输出结果 |
<?xml version="1.0"?>
<svg width="120" height="120" viewBox="0 0 120 120"
xmlns="https://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> |
|
» begin-1-offset.svg
Syncbase示例
| 源代码 |
输出结果 |
<?xml version="1.0"?>
<svg width="120" height="120" viewBox="0 0 120 120"
xmlns="https://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="https://www.w3.org/1999/xlink">
<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> |
|
» begin-2-syncbase.svg
Event示例
| 源代码 |
输出结果 |
<?xml version="1.0"?>
<svg width="120" height="120" viewBox="0 0 120 120"
xmlns="https://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="https://www.w3.org/1999/xlink">
<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> |
|
» begin-3-event.svg
Repeat示例
| 源代码 |
输出结果 |
<?xml version="1.0"?>
<svg width="120" height="120" viewBox="0 0 120 120"
xmlns="https://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="https://www.w3.org/1999/xlink">
<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> |
|
» begin-4-repeat.svg
Accesskey示例
| 源代码 |
输出结果 |
<?xml version="1.0"?>
<svg width="120" height="120" viewBox="0 0 120 120"
xmlns="https://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="https://www.w3.org/1999/xlink">
<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> |
这个示例嵌入在一个iFrame中，如果你想激活这个按键事件，你必须先点击它。 |
» begin-5-accesskey.svg
元素
下列元素可以使用begin属性：
