begin

L'attribut begin définit quand l'élément associé devient actif. Pour un élément d'animation, c'est le point auquel l'animation doit commencer.

La valeur de l'attribut est une liste de valeurs séparées par des points-virgules. L'interprétation d'une liste de temps de début est détaillée dans la spécification SMIL dans « Évaluation des listes de temps de début et de fin » ^(angl.). Chaque valeur individuelle peut être l'une des suivantes : <offset-value>, <syncbase-value>, <event-value>, <repeat-value>, <accessKey-value>, <wallclock-sync-value> ou le mot-clé indefinite.

Vous pouvez utiliser cet attribut avec les éléments SVG suivants :

`animate`, `animateMotion`, `animateTransform`, `set`

Pour <animate>, <animateMotion>, <animateTransform> et <set>, begin définit quand l'élément doit commencer, c'est-à-dire devenir actif.

Valeur	`<begin-value-list>`
Valeur par défaut	`0s`
Peut être animé	Non

<begin-value-list> est une liste de valeurs séparées par des points-virgules. Chaque valeur peut être l'une des suivantes :

<offset-value>

Cette valeur définit un valeur d'horloge qui représente un point dans le temps par rapport au début du document SVG (généralement l'évènement load ou DOMContentLoaded). Les valeurs négatives sont valides.

<syncbase-value>

Cette valeur définit une base de synchronisation et un décalage optionnel par rapport à cette base de synchronisation. Le moment de début de l'animation de l'élément est défini par rapport au début ou à la fin active d'une autre animation.

Une valeur de base de synchronisation valide consiste en une référence d'ID à un autre élément d'animation suivie d'un point et de begin ou end pour identifier s'il faut se synchroniser avec le début ou la fin active de l'élément d'animation référencé. Une valeur de décalage optionnelle telle que définie dans <offset-value> peut être ajoutée.

<event-value>

Cette valeur définit un évènement et un décalage optionnel qui détermine le moment où l'animation de l'élément doit commencer. Le moment de début de l'animation est défini par rapport au moment où l'évènement défini est déclenché.

Une valeur d'évènement valide consiste en une référence d'ID à un élément suivie d'un point et de l'un des évènements pris en charge pour cet élément. Tous les évènements valides (pas nécessairement pris en charge par tous les éléments) sont définis par les spécifications DOM et HTML. Ceux-ci sont :

Un décalage optionnel tel que défini dans <offset-value> peut être ajouté.

<repeat-value>

Cette valeur définit un évènement de répétition qualifié. Le moment de début de l'animation de l'élément est défini par rapport au moment où l'évènement de répétition est déclenché avec la valeur d'itération définie.

Une valeur de répétition valide consiste en une référence d'ID à un élément suivie d'un point et de la fonction repeat() avec une valeur entière définissant le nombre de répétitions comme paramètre. Un décalage optionnel tel que défini dans <offset-value> peut être ajouté.

<accessKey-value>

Cette valeur définit une touche d'accès qui doit déclencher l'animation. L'animation de l'élément commence lorsque l'utilisateur·ice appuie sur la touche définie.

Une valeur de touche d'accès valide consiste en la fonction accessKey() avec le caractère à saisir comme paramètre. Un décalage optionnel tel que défini dans <offset-value> peut être ajouté.

<wallclock-sync-value>

Cette valeur définit le moment de début de l'animation comme une heure réelle.

Une valeur de synchronisation sur l'horloge murale valide consiste en la fonction wallclock() avec une valeur temporelle comme paramètre. La syntaxe temporelle est basée sur la syntaxe définie dans ISO 8601 ^(angl.).

indefinite

Le début de l'animation est déterminé par un appel à la méthode beginElement() ou par un lien hypertexte ciblant l'élément.

Exemples

Exemple de décalage

html

<svg
  width="120"
  height="120"
  viewBox="0 0 120 120"
  xmlns="http://www.w3.org/2000/svg">
  <!-- rectangles animés -->
  <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>

  <!-- grille -->
  <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>

Exemple de synchronisation de base

html

<svg
  width="120"
  height="120"
  viewBox="0 0 120 120"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- rectangles animés -->
  <rect x="10" y="35" height="15" width="0">
    <animate
      attributeType="XML"
      attributeName="width"
      to="50"
      id="first"
      begin="0s;third.end"
      dur="4s" />
  </rect>

  <rect x="60" y="60" height="15" width="0">
    <animate
      attributeType="XML"
      attributeName="width"
      to="25"
      id="second"
      begin="first.end"
      dur="2s" />
  </rect>

  <rect x="85" y="85" height="15" width="0">
    <animate
      attributeType="XML"
      attributeName="width"
      to="25"
      id="third"
      begin="second.end"
      dur="2s" />
  </rect>

  <!-- grille -->
  <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>

Exemple d'évènement

html

<svg
  width="120"
  height="120"
  viewBox="0 0 120 120"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- rectangle animé -->
  <rect x="10" y="35" height="15" width="0">
    <animate
      attributeType="XML"
      attributeName="width"
      from="0"
      to="100"
      begin="boutonDebut.click"
      dur="8s"
      fill="freeze" />
  </rect>

  <!-- déclencheur -->
  <rect
    id="boutonDebut"
    cursor="pointer"
    x="4.5"
    y="62.5"
    rx="5"
    height="25"
    width="110"
    fill="#EFEFEF"
    stroke="black"
    stroke-width="1" />

  <text x="60" y="80" text-anchor="middle" pointer-events="none">
    Cliquez sur moi.
  </text>

  <!-- grille -->
  <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>

Exemple de répétition

html

<svg
  width="120"
  height="120"
  viewBox="0 0 120 120"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- rectangle animé -->
  <rect x="10" y="35" height="15" width="0">
    <animate
      attributeType="XML"
      attributeName="width"
      from="0"
      to="100"
      id="maBoucle"
      begin="0s;maBoucle.end"
      dur="4s"
      repeatCount="3" />

    <set
      attributeType="CSS"
      attributeName="fill"
      to="green"
      begin="maBoucle.begin" />

    <set
      attributeType="CSS"
      attributeName="fill"
      to="gold"
      begin="maBoucle.repeat(1)" />

    <set
      attributeType="CSS"
      attributeName="fill"
      to="red"
      begin="maBoucle.repeat(2)" />
  </rect>

  <!-- grille -->
  <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>

Exemple de touche d'accès

html

<svg
  width="180"
  height="120"
  viewBox="0 0 180 120"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- rectangles animés -->
  <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>

  <!-- déclencheur -->
  <text x="90" y="80" text-anchor="middle" pointer-events="none">
    Appuyez sur la touche "s"
  </text>

  <!-- grille -->
  <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>

Cet exemple est intégré dans un iFrame. Si vous voulez activer les évènements de touche, vous devez d'abord cliquer dessus.

Spécifications

Spécification
SVG Animations Level 2 # BeginAttribute

Voir aussi

Animation SVG avec SMIL

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 23 sept. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu