blob: a7c87621b0b0a5247f5b14d0f394e5fab26882fb (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
---
title: begin
slug: Web/SVG/Attribute/begin
tags:
- SVG
- SVG属性
- 参考
- 需要兼容性表
translation_of: Web/SVG/Attribute/begin
---
<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p>
<p>这个属性定义了动画何时开始。</p>
<p>这个属性值是一个分号分隔的数列值。SMIL规范的<a class="external" href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Timing-EvaluationOfBeginEndTimeLists" title="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Timing-EvaluationOfBeginEndTimeLists">"Evaluation of begin and end time lists"</a>章节详细解释了开始时间数列。每个单独的值可以是下述之一：<code><offset-value></code>、 <code><syncbase-value></code>、 <code><event-value></code>、 <code><repeat-value></code>、 <code><accessKey-value></code>、 <code><wallclock-sync-value></code>或者关键词<code>indefinite</code>。</p>
<h2 id="用法">用法</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="row">类别</th>
<td>动画定时属性</td>
</tr>
<tr>
<th scope="row">值</th>
<td><begin-value-list></td>
</tr>
<tr>
<th scope="row">可变性</th>
<td>No</td>
</tr>
<tr>
<th scope="row">规范文档</th>
<td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#BeginAttribute" title="http://www.w3.org/TR/SVG/animate.html#BeginAttribute">SVG 1.1 (2nd Edition)</a></td>
</tr>
</tbody>
</table>
<p><code><begin-value-list></code>中的每一个值可以是下述之一：</p>
<dl>
<dt><offset-value></dt>
<dd>一个<a href="/en/SVG/Content_type#Clock-value" title="en/SVG/Content_type#Clock-value">时钟值</a>代表了一个相对于SVG文档开头的时间点，SVG文档开头通常是指load事件或者DOMReady事件触发的时间点。负值是合法的。</dd>
<dt><syncbase-value></dt>
<dd>描述一个<em>syncbase</em>以及一个可选的来自于<em>syncbase</em>的时偏移。元素的动画开始时间被定义为相对于另一个动画的开头或者激活结束。一个ID及其后面跟着的.begin或.end构成了一个syncbase，ID引用到另一个动画元素，.begin或.end用来确定到底是与引用的动画元素的动画开头同步、 还是与引用的动画元素的动画激活结束同步。</dd>
<dt><event-value></dt>
<dd><font face="Consolas, Liberation Mono, Courier, monospace">描述了一个事件以及一个可选的时偏移，用来确定动画开始的时点。触发指定事件的时点，被定义为动画开始的时点。一个元素ID及其后面跟着的一个点及其后面跟着事件名构成了一个合法的event-value值。事件名必须是元素支持的事件名。全部合法的事件（不一定是所有元素都支持的事件）包括这些：focusin、 focusout、 </font><code>activate</code>、 <code>click</code>、 <code>mousedown</code>、 <code>mouseup</code>、 <code>mouseover</code>、 <code>mousemove</code>、 <code>mouseout</code>、 <code>DOMSubtreeModified</code>、 <code>DOMNodeInserted</code>、 <code>DOMNodeRemoved</code>、 <code>DOMNodeRemovedFromDocument</code>、 <code>DOMNodeInsertedIntoDocument</code>、 <code>DOMAttrModified</code>、 <code>DOMCharacterDataModified</code>、 <code>SVGLoad</code>、 <code>SVGUnload</code>、 <code>SVGAbort</code>、 <code>SVGError</code>、 <code>SVGResize</code>、 <code>SVGScroll</code>、 <code>SVGZoom</code>、 <code>beginEvent</code>、 <code>endEvent</code>和<code>repeatEvent。</code></dd>
<dt><repeat-value></dt>
<dd>描述了一个符合条件重复事件。repeat事件发生了指定次数的时间点，被定义为元素动画的开始时间点。</dd>
<dt><accessKey-value></dt>
<dd>描述了一个用来触发动画的访问键。当用户按下指定的键时，元素动画就开始了。</dd>
<dt><wallclock-sync-value></dt>
<dd>描述了一个动画开始时间，是真实世界钟的时点。时点的句法遵守ISO8601定义的句法。</dd>
</dl>
<h2 id="示例">示例</h2>
<h3 id="Offset示例">Offset示例</h3>
<p>» <a href="https://developer.mozilla.org/files/3290/begin-1-offset.svg" title="https://developer.mozilla.org/files/3290/begin-1-offset.svg">begin-1-offset.svg</a></p>
<h3 id="Syncbase示例">Syncbase示例</h3>
<p>» <a href="https://developer.mozilla.org/files/3291/begin-2-syncbase.svg" title="https://developer.mozilla.org/files/3291/begin-2-syncbase.svg">begin-2-syncbase.svg</a></p>
<h3 id="Event示例">Event示例</h3>
<p>» <a href="https://developer.mozilla.org/files/3292/begin-3-event.svg" title="https://developer.mozilla.org/files/3292/begin-3-event.svg">begin-3-event.svg</a></p>
<h3 id="Repeat示例">Repeat示例</h3>
<p>» <a href="https://developer.mozilla.org/files/3293/begin-4-repeat.svg" title="https://developer.mozilla.org/files/3293/begin-4-repeat.svg">begin-4-repeat.svg</a></p>
<h3 id="Accesskey示例">Accesskey示例</h3>
<p>» <a href="https://developer.mozilla.org/files/3294/begin-5-accesskey.svg" title="https://developer.mozilla.org/files/3294/begin-5-accesskey.svg">begin-5-accesskey.svg</a></p>
<h2 id="元素">元素</h2>
<p>下列元素可以使用<code>begin</code>属性：</p>
<ul>
<li><a href="/en/SVG/Element#Animation" title="en/SVG/Element#Animation">动画元素</a> »</li>
</ul>
|
