Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
begin
Dasbegin-Attribut definiert, wann das zugehörige Element aktiv wird. Für ein Animationselement ist dies der Zeitpunkt, zu dem die Animation beginnen soll.
Der Attributwert ist eine durch Semikolons getrennte Liste von Werten. Die Interpretation einer Liste von Startzeiten wird in der SMIL-Spezifikation im Abschnitt"Evaluation of begin and end time lists" detailliert beschrieben. Jeder einzelne Wert kann einer der folgenden sein:<offset-value>,<syncbase-value>,<event-value>,<repeat-value>,<accessKey-value>,<wallclock-sync-value> oder das Schlüsselwortindefinite.
Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
animate, animateMotion, animateTransform, set
Für<animate>,<animateMotion>,<animateTransform> und<set> definiertbegin, wann das Element beginnen soll, d.h. wann es aktiv wird.
| Wert | <begin-value-list> |
|---|---|
| Standardwert | 0s |
| Animierbar | Nein |
Die<begin-value-list> ist eine durch Semikolons getrennte Liste von Werten. Jeder Wert kann einer der folgenden sein:
<offset-value>Dieser Wert definiert einenclock-value, der einen Zeitpunkt relativ zum Beginn des SVG-Dokuments darstellt (normalerweise das
load- oderDOMContentLoaded-Ereignis). Negative Werte sind gültig.<syncbase-value>Dieser Wert definiert einesyncbase und einen optionalen Versatz von diesersyncbase. Die Startzeit der Animation des Elements wird relativ zum Beginn oder aktiven Ende einer anderen Animation definiert.
Ein gültiger syncbase-Wert besteht aus einer ID-Referenz zu einem anderen Animationselement, gefolgt von einem Punkt und entweder
beginoderend, um zu identifizieren, ob mit dem Beginn oder dem aktiven Ende des referenzierten Animationselements synchronisiert werden soll. Ein optionaler Versatzwert, wie im<offset-value>definiert, kann angehängt werden.<event-value>Dieser Wert definiert ein Ereignis und einen optionalen Versatz, der bestimmt, wann die Animation des Elements beginnen soll. Die Startzeit der Animation wird relativ zum Zeitpunkt festgelegt, zu dem das angegebene Ereignis ausgelöst wird.
Ein gültiger event-Wert besteht aus einer Element-ID, gefolgt von einem Punkt und einem der für dieses Element unterstützten Ereignisse. Alle gültigen Ereignisse (nicht unbedingt von allen Elementen unterstützt) sind durch die DOM- und HTML-Spezifikationen definiert. Diese sind:
focusblurfocusinfocusoutDOMActivateauxclickclickdblclickmousedownmouseentermouseleavemousemovemouseoutmouseovermouseupwheelbeforeinputinputkeydownkeyupcompositionstartcompositionupdatecompositionendloadunloadaborterrorselectresizescrollbeginEventendEventrepeatEvent
Ein optionaler Versatzwert, wie im
<offset-value>definiert, kann angehängt werden.<repeat-value>Dieser Wert definiert ein qualifiziertes Wiederholungsereignis. Die Startzeit der Elementanimation wird relativ zu dem Zeitpunkt definiert, zu dem das Wiederholungsereignis mit dem angegebenen Iterationswert ausgelöst wird.
Ein gültiger repeat-Wert besteht aus einer Element-ID, gefolgt von einem Punkt und der Funktion
repeat()mit einem ganzzahligen Wert, der die Anzahl der Wiederholungen als Parameter angibt. Ein optionaler Versatzwert, wie im<offset-value>definiert, kann angehängt werden.<accessKey-value>Dieser Wert definiert einen Zugangsschlüssel, der die Animation auslösen soll. Die Elementanimation beginnt, wenn der Benutzer die angegebene Taste drückt.
Ein gültiger accessKey-Wert besteht aus der Funktion
accessKey()mit dem einzugebenden Zeichen als Parameter. Ein optionaler Versatzwert, wie im<offset-value>definiert, kann angehängt werden.<wallclock-sync-value>Dieser Wert definiert die Startzeit der Animation als reale Uhrzeit.
Ein gültiger wallclock-sync-Wert besteht aus der Funktion
wallclock()mit einem Zeitwert als Parameter. Die Syntax der Zeit basiert auf der inISO 8601 definierten Syntax.indefiniteDer Beginn der Animation wird durch einen Aufruf der
beginElement()-Methode oder einen auf das Element gerichteten Hyperlink bestimmt.
Beispiele
Offset-Beispiel
<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1"> <!-- animated rectangles --> <rect x="10" y="35" height="15" width="0"> <animate attributeType="XML" attributeName="width" to="100" begin="0s" dur="8s" fill="freeze" /> </rect> <rect x="35" y="60" height="15" width="0"> <animate attributeType="XML" attributeName="width" to="75" begin="2s" dur="6s" fill="freeze" /> </rect> <rect x="60" y="85" height="15" width="0"> <animate attributeType="XML" attributeName="width" to="50" begin="4s" dur="4s" fill="freeze" /> </rect> <!-- grid --> <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-Beispiel
<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"> <!-- animated rectangles --> <rect x="10" y="35" height="15" width="0"> <animate attributeType="XML" attributeName="width" to="50" begin="0s;third.end" dur="4s" /> </rect> <rect x="60" y="60" height="15" width="0"> <animate attributeType="XML" attributeName="width" to="25" begin="first.end" dur="2s" /> </rect> <rect x="85" y="85" height="15" width="0"> <animate attributeType="XML" attributeName="width" to="25" begin="second.end" dur="2s" /> </rect> <!-- grid --> <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>Ereignis-Beispiel
<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"> <!-- animated rectangle --> <rect x="10" y="35" height="15" width="0"> <animate attributeType="XML" attributeName="width" from="0" to="100" begin="startButton.click" dur="8s" fill="freeze" /> </rect> <!-- trigger --> <rect 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" pointer-events="none"> Click me. </text> <!-- grid --> <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>Wiederholungs-Beispiel
<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"> <!-- animated rectangle --> <rect x="10" y="35" height="15" width="0"> <animate attributeType="XML" attributeName="width" from="0" to="100" begin="0s;myLoop.end" dur="4s" repeatCount="3" /> <set attributeType="CSS" attributeName="fill" to="green" begin="myLoop.begin" /> <set attributeType="CSS" attributeName="fill" to="gold" begin="myLoop.repeat(1)" /> <set attributeType="CSS" attributeName="fill" to="red" begin="myLoop.repeat(2)" /> </rect> <!-- grid --> <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-Beispiel
<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"> <!-- animated rectangles --> <rect x="10" y="35" height="15" width="0"> <animate attributeType="XML" attributeName="width" from="0" to="100" begin="accessKey(s)" dur="8s" fill="freeze" /> </rect> <!-- trigger --> <text x="60" y="80" text-anchor="middle" pointer-events="none"> Hit the "s" key </text> <!-- grid --> <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>Dieses Beispiel ist in einem iFrame eingebettet. Wenn Sie die Tastenereignisse aktivieren möchten, müssen Sie zuerst darauf klicken.
Spezifikationen
| Specification |
|---|
| SVG Animations Level 2 # BeginAttribute |