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事件）。负值是有效的。
<syncbase-value>——描述一个同步库（syncbase）和一个从该同步库中的可选偏移量。元素的动画开始时间以另一个动画的开始或活动结束时间来定义。一个同步库包含一个引用到另一个动画元素的ID，其后是用来确定是否与引用的动画元素的开始或活动结束同步的.begin或者.end。
<event-value>——描述一个事件和一个可选的偏移量，它决定了元素动画开始的时间。动画开始时间是相对于指定事件被触发的时间而定义的。有效的事件值由元素ID后跟一个点和该元素支持的事件之一组成。所有有效事件（不一定是所有的元素都支持）是：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>——描述合格的重复事件。元素动画开始时间是相对于用指定迭代值引发重复事件的时间定义的。
<accessKey-value>——描述一个应该触发动画的accessKey。元素动画将在用户按下指定的键时开始。<wallclock-sync-value>——将动画开始时间描述为实际时钟时间。时间语法基于ISO8601中定义的语法。
实例
偏移示例
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> | ? |
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> | ? |
事件示例
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> | ? |
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> | ? |
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属性：
- Animation elements ?
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
