Width

« SVG Attribute reference home

Cet attribut indique une dimension horizontale <length> dans le système de coordonnées. La donnée (ou coordonnée) définie par cet attribut dépend de l'élément sur lequel il est appliqué. La plupart du temps, il représente la largeur de la région rectangulaire composant l'élément (voir les exceptions dans la documentation pour chaque type d'élément).

Cet attribut doit être spécifié, hormis pour les éléments <svg> dont la valeur par défaut est de 100% (exepté pour l'élément racine <svg> qui possède un parent HTML),  <filter> et <mask> dont la valeur par défaut est de 120%.

Contexte d'utilisation

Catégories Aucune
Valeur <length>
Animable Oui
Document normatif SVG 1.1 (2nd Edition): foreignObject element
SVG 1.1 (2nd Edition): image element
SVG 1.1 (2nd Edition): pattern element
SVG 1.1 (2nd Edition): rect element
SVG 1.1 (2nd Edition): svg element
SVG 1.1 (2nd Edition): use element
SVG 1.1 (2nd Edition): Filter primitive
SVG 1.1 (2nd Edition): mask element

<length>

Le type de données <length> correspond à une mesure de distance appliquée sur un élémént à l'aide d'une unité de mesure. Ces mesures sont spécifiées de deux manières, selon leur contexte.

Lorsqu'elles sont utilisées dans une feuille de style, la mesure <length> est définie comme suit :

length ::= number (~"em" | ~"ex" | ~"px" | ~"in" | ~"cm" | ~"mm" | ~"pt" | ~"pc")?

Lorsque les longueurs sont utilisées sur un attribut SVG, la mesure <length> est définie comme suit :

length ::= number ("em" | "ex" | "px" | "in" | "cm" | "mm" | "pt" | "pc" | "%")?

Voir les spécifications CSS2 pour en apprendre plus sur la signification de ces unités de mesure.

Concernant les propriétés définies en CSS2, l'utilisation d'une unité de mesures est requise. A l'inverse, les propriétés définies par les éléments SVG et leurs attributs de présentation associés ne nécessitent pas l'utilisation d'une unité de mesure. Si elle n'est pas explicitée, l'unité de mesure représentera une distance dans le système de coordonnées utilisé. Si elle est spécifiée, l'unité de mesure doit toujours être écrite en minuscule, qu'elle soit définie en SVG1.1 ou CSS2.

Il faut noter que la définition de la propriété <length> autorise l'utilisation du pourcentage comme unité de mesure. La valeur relative résultant du pourcentage dépendra de l'attribut sur lequel il aura été spécifié. Deux cas :

  • Lorsque la distance exprimée en pourcentage représente la largeur ou la hauteur du viewport.
  • Lorsque la distance exprimée en pourcentage représente un pourcentage de la largeur ou hauteur d'un élément donné.

Dans le DOM SVG, les valeurs <length> sont représentées par les objets SVGLength ou SVGAnimatedLength.

Exemple

<?xml version="1.0"?>
<svg width="120" height="120"
     viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg">

  <rect x="10" y="10" width="100" height="100"/>
</svg>

Eléments

Les éléments suivants peuvent utiliser l'attribut width :