viewBox

« Sommaire de la référence des attributs SVG

L'attribut viewBox permet de spécifier qu'un groupe d'éléments graphiques s'étire afin de s'adapter à un élément conteneur.

La valeur de l'attribut viewBox est une liste de quatre nombres min-x, min-y, width et height, séparés par des espaces ou/et des virgules. Ces nombres spécifient un rectangle dans l'espace utilisateur, qui doit correspondre aux coins du viewport établis par l'élément SVG donné, ceci en prenant en compte l'attribut preserveAspectRatio.

Les valeurs négatives de width et height ne sont pas autorisées et une valeur à zéro désactive le rendu de l'élément.

Contexte d'utilisation

Catégories Aucune
Valeur Voir ci-dessus
Animable Oui
Document de norme SVG 1.1 (2nd Edition)

Exemple

Nous créons ici un viewport de 500×300 unités, ce qui fait que chaque unité de l'élément SVG correspondra à une unité du viewport. On aura donc un élément SVG dont le système de coordonnée ira de 0 à 300 en largeur et de 0 à 200 en hauteur :

<svg width="300" height="200"></svg>

En ajoutant une notion de viewbox, nous transformons ce système de coordonnées afin qu'il aille de 0 à w à l'horizontale et de 0 à h à la verticale. Ici, ce sera donc 300/30 (=10) en x ce qui équivaut à 10 unités d'élément SVG pour 1 unité du viewport :

<svg width="300" height="200" viewBox="0 0 30 20"></svg>

Elements

Les éléments suivants peuvent utiliser l'attribut viewBox

Voir également

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : Frigory, Acen1991, miam
 Dernière mise à jour par : Frigory,