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 300×200 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>