Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

<set>

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

L'élément SVG <set> fournit une méthode permettant de définir la valeur d'un attribut pour une durée déterminée.

Il prend en charge tous les types d'attributs, y compris ceux qui ne peuvent pas raisonnablement être interpolés, comme les valeurs de type chaîne de caractères ou booléen. Pour les attributs qui peuvent raisonnablement être interpolés, l'élément <animate> est généralement préféré.

Note : L'élément <set> est non additif. Les attributs additive et accumulate ne sont pas autorisés et sont ignorés s'ils sont définis.

Contexte d'utilisation

CatégoriesÉlément d'animation
Contenu autoriséTout élément de cette liste, quel qu'en soit l'ordre :
Éléments descriptifs

Attributs

to

Cet attribut définit la valeur à appliquer à l'attribut cible pendant la durée de l'animation. La valeur doit correspondre aux exigences de l'attribut cible. Type de valeur : <anything> ; Valeur par défaut : aucune ; Animable : non

Interface DOM

Cet élément implémente l'interface SVGSetElement.

Exemple

html
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <style>
    rect {
      cursor: pointer;
    }
    .round {
      rx: 5px;
      fill: green;
    }
  </style>

  <rect id="me" width="10" height="10">
    <set attributeName="class" to="round" begin="me.click" dur="2s" />
  </rect>
</svg>

Spécifications

Spécification
SVG Animations Level 2
# SetElement

Compatibilité des navigateurs

Voir aussi