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%.

<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.

<?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>

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

• Filter primitive elements »
• <filter>
• <foreignObject>
• <image>
• <pattern>
• <rect>
• <svg>
• <use>
• <mask>