begin（开始）
begin
这个属性定义了动画何时开始。
属性值是以分号分隔的值列表。开始时间列表的解释在“开始和结束评估时间列表”中的SMIL规范中详细说明。每个单独的值可以是以下中的一个：<offset-value>，<syncbase-value>，<event-value>，<repeat-value>，<accessKey-value>，<wallclock-sync-value>或关键字indefinite。
用法上下文
| 分类 | 动画计时属性 |
|---|
| 值 | <开始值列表> |
| 动画 | 没有 |
| 规范性文件 | SVG 1.1（第2版） |
每个<begin-value-list>中的值可以是以下值之一：
<offset-value>——一个时钟值，表示相对于SVG文档开始的时间点（通常是loador DOMReady事件）。负值是有效的。
实例
偏移示例
| Source code | Output result |
|---|
| <?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> | |
» begin-1-offset.svg
Syncbase示例
| Source code | Output result |
|---|
| <?xml version="1.0"?> <svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://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
事件示例
| Source code | Output result |
|---|
| <?xml version="1.0"?> <svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://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示例
| Source code | Output result |
|---|
| <?xml version="1.0"?> <svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://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 示例
| Source code | Output result |
|---|
| <?xml version="1.0"?> <svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://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> | 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
适用元素
以下元素可以使用该begin属性：
