width
=====

L'attribut **`width`** définit la longueur horizontale d'un élément dans le système des coordonnées de l'utilisatrice ou l'utilisateur.

Cet attribut peut être utilisé avec les éléments SVG suivants :

* `<feBlend>`
* `<feColorMatrix>`
* `<feComponentTransfer>`
* `<feComposite>`
* `<feConvolveMatrix>`
* `<feDiffuseLighting>`
* `<feDisplacementMap>`
* `<feDropShadow>`
* `<feFlood>`
* `<feGaussianBlur>`
* `<feImage>`
* `<feMerge>`
* `<feMorphology>`
* `<feOffset>`
* `<feSpecularLighting>`
* `<feTile>`
* `<feTurbulence>`
* `<filter>`
* `<foreignObject>`
* `<image>`
* `<mask>`
* `<pattern>`
* `<rect>`
* `<svg>`
* `<use>`
Exemple
-------
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg">
  <!-- Avec une largeur de 0 ou inférieure, rien ne sera affichée -->
  <rect x="0" y="0" width="0" height="90" />
  <rect x="0" y="100" width="60" height="90" />
  <rect x="0" y="200" width="100%" height="90" />
</svg>
```

`<feBlend>`
-----------

Pour `<feBlend>`, `width` définit la longueur horizontale de la zone de rendu de la primitive.

|  |  |
| --- | --- |
| Valeur | **`<length>` (en-US)**|**`<percentage>` (en-US)** |
| Valeur par défaut | `100%` |
| Peut être animé | Oui |

`<feColorMatrix>`
-----------------

Pour `<feColorMatrix>`, `width` définit la longueur horizontale de la zone de rendu de la primitive.

|  |  |
| --- | --- |
| Valeur | **`<length>` (en-US)**|**`<percentage>` (en-US)** |
| Valeur par défaut | `100%` |
| Peut être animé | Oui |

`<feComponentTransfer>`
-----------------------

Pour `<feComponentTransfer>`, `width` définit la longueur horizontale de la zone de rendu de la primitive.

|  |  |
| --- | --- |
| Valeur | **`<length>` (en-US)**|**`<percentage>` (en-US)** |
| Valeur par défaut | `100%` |
| Peut être animé | Oui |

`<feComposite>`
---------------

Pour `<feComposite>`, `width` définit la longueur horizontale de la zone de rendu de la primitive.

|  |  |
| --- | --- |
| Valeur | **`<length>` (en-US)**|**`<percentage>` (en-US)** |
| Valeur par défaut | `100%` |
| Peut être animé | Oui |

`<feConvolveMatrix>`
--------------------

Pour `<feConvolveMatrix>`, `width` définit la longueur horizontale de la zone de rendu de la primitive.

|  |  |
| --- | --- |
| Valeur | **`<length>` (en-US)**|**`<percentage>` (en-US)** |
| Valeur par défaut | `100%` |
| Peut être animé | Oui |

`<feDiffuseLighting>`
---------------------

Pour `<feDiffuseLighting>`, `width` définit la longueur horizontale de la zone de rendu de la primitive.

|  |  |
| --- | --- |
| Valeur | **`<length>` (en-US)**|**`<percentage>` (en-US)** |
| Valeur par défaut | `100%` |
| Peut être animé | Oui |

`<feDisplacementMap>`
---------------------

Pour `<feDisplacementMap>`, `width` définit la longueur horizontale de la zone de rendu de la primitive.

|  |  |
| --- | --- |
| Valeur | **`<length>` (en-US)**|**`<percentage>` (en-US)** |
| Valeur par défaut | `100%` |
| Peut être animé | Oui |

`<feDropShadow>`
----------------

Pour `<feDropShadow>`, `width` définit la longueur horizontale de la zone de rendu de la primitive.

|  |  |
| --- | --- |
| Valeur | **`<length>` (en-US)**|**`<percentage>` (en-US)** |
| Valeur par défaut | `100%` |
| Peut être animé | Oui |

`<feFlood>`
-----------

Pour `<feFlood>`, `width` définit la longueur horizontale de la zone de rendu de la primitive.

|  |  |
| --- | --- |
| Valeur | **`<length>` (en-US)**|**`<percentage>` (en-US)** |
| Valeur par défaut | `100%` |
| Peut être animé | Oui |

`<feGaussianBlur>`
------------------

Pour `<feGaussianBlur>`, `width` définit la longueur horizontale de la zone de rendu de la primitive.

|  |  |
| --- | --- |
| Valeur | **`<length>` (en-US)**|**`<percentage>` (en-US)** |
| Valeur par défaut | `100%` |
| Peut être animé | Oui |

`<feImage>`
-----------

Pour `<feImage>`, `width` définit la longueur horizontale de la zone de rendu de la primitive.

|  |  |
| --- | --- |
| Valeur | **`<length>` (en-US)**|**`<percentage>` (en-US)** |
| Valeur par défaut | `100%` |
| Peut être animé | Oui |

`<feMerge>`
-----------

Pour `<feMerge>`, `width` définit la longueur horizontale de la zone de rendu de la primitive.

|  |  |
| --- | --- |
| Valeur | **`<length>` (en-US)**|**`<percentage>` (en-US)** |
| Valeur par défaut | `100%` |
| Peut être animé | Oui |

`<feMorphology>`
----------------

Pour `<feMorphology>`, `width` définit la longueur horizontale de la zone de rendu de la primitive.

|  |  |
| --- | --- |
| Valeur | **`<length>` (en-US)**|**`<percentage>` (en-US)** |
| Valeur par défaut | `100%` |
| Peut être animé | Oui |

`<feOffset>`
------------

Pour `<feOffset>`, `width` définit la longueur horizontale de la zone de rendu de la primitive.

|  |  |
| --- | --- |
| Valeur | **`<length>` (en-US)**|**`<percentage>` (en-US)** |
| Valeur par défaut | `100%` |
| Peut être animé | Oui |

`<feSpecularLighting>`
----------------------

Pour `<feSpecularLighting>`, `width` définit la longueur horizontale de la zone de rendu de la primitive.

|  |  |
| --- | --- |
| Valeur | **`<length>` (en-US)**|**`<percentage>` (en-US)** |
| Valeur par défaut | `100%` |
| Peut être animé | Oui |

`<feTile>`
----------

Pour `<feTile>`, `width` définit la longueur horizontale de la zone de rendu de la primitive.

|  |  |
| --- | --- |
| Valeur | **`<length>` (en-US)**|**`<percentage>` (en-US)** |
| Valeur par défaut | `100%` |
| Peut être animé | Oui |

`<feTurbulence>`
----------------

Pour `<feTurbulence>`, `width` définit la longueur horizontale de la zone de rendu de la primitive.

|  |  |
| --- | --- |
| Valeur | **`<length>` (en-US)**|**`<percentage>` (en-US)** |
| Valeur par défaut | `100%` |
| Peut être animé | Oui |

`<filter>`
----------

Pour `<filter>`, `width` définit la longueur horizontale de la zone de rendu du filtre.

|  |  |
| --- | --- |
| Valeur | **`<length>` (en-US)**|**`<percentage>` (en-US)** |
| Valeur par défaut | `120%` |
| Peut être animé | Oui |

`<foreignObject>`
-----------------

Pour `<foreignObject>`, `width` définit la longueur horizontale de la zone de rendu pour le document référencé.

|  |  |
| --- | --- |
| Valeur | `auto`|**`<length>` (en-US)**|**`<percentage>` (en-US)** |
| Valeur par défaut | `auto` (traité comme `0`) |
| Peut être animé | Oui |

**Note :** À partir de SVG2, `width` est une propriété *géométrique*, ce qui signifie que cet attribut peut aussi être utilisé comme une propriété CSS pour `<foreignObject>`.

`<image>`
---------

Pour `<image>`, `width` définit la longueur horizontale de l'image.

|  |  |
| --- | --- |
| Valeur | `auto` | **`<length>` (en-US)**|**`<percentage>` (en-US)** |
| Valeur par défaut | `auto` (traité comme la hauteur intrinsèque de l'image) |
| Peut être animé | Oui |

**Note :** À partir de SVG2, `width` est une propriété *géométrique*, ce qui signifie que cet attribut peut également être utilisé comme propriété CSS pour les images.

`<mask>`
--------

Pour `<mask>`, `width` définit la longueur horizontale de sa zone d'effet. L'effet exact de cet attribut est influencé par l'attribut `maskUnits` (en-US).

|  |  |
| --- | --- |
| Valeur | **`<length>` (en-US)**|**`<percentage>` (en-US)** |
| Valeur par défaut | `120%` |
| Peut être animé | Oui |

`<pattern>`
-----------

Pour `<pattern>`, `width` définit la longueur horizontale du motif répété. L'effet exact de cet attribut est influencé par les attributs `patternUnits` (en-US) et `patternTransform` (en-US).

|  |  |
| --- | --- |
| Valeur | **`<length>` (en-US)** |
| Valeur par défaut | `0` |
| Peut être animé | Oui |

`<rect>`
--------

Pour `<rect>`, `width` définit la longueur horizontale du rectangle.

|  |  |
| --- | --- |
| Valeur | `auto`|**`<length>` (en-US)**|**`<percentage>` (en-US)** |
| Valeur par défaut | `auto` (traité comme `0`) |
| Peut être animé | Oui |

**Note :** À partir de SVG2, `width` est une propriété *géométrique*, ce qui signifie que cet attribut peut aussi être utilisé comme une propriété CSS pour les rectangles.

`<svg>`
-------

Pour `<svg>`, `width` définit la longueur horizontale de la zone de rendu de la zone d'affichage SVG.

**Note :** Dans un document HTML, si les deux attributs `viewBox` et `width` sont absents, l'élément SVG sera rendu avec une hauteur de `150px`.


|  |  |
| --- | --- |
| Valeur | `auto`|**`<length>` (en-US)**|**`<percentage>` (en-US)** |
| Valeur par défaut | `auto` (traité comme `100%`) |
| Peut être animé | Oui |

**Note :** À partir de SVG2, `width` est une propriété *géométrique* et peut donc être utilisée comme propriété CSS pour `<svg>`.

`<use>`
-------

Pour `<use>`, `width` définit la longueur horizontale de l'élément référencé.

|  |  |
| --- | --- |
| Valeur | `auto`|**`<length>` (en-US)**|**`<percentage>` (en-US)** |
| Valeur par défaut | `auto` (traité comme `0`) |
| Peut être animé | Oui |

**Note :** `width` n'a pas d'effet sur les éléments `<use>`, à moins que l'élément référencé ait un attribut `viewbox`, c'est-à-dire que leur effet s'applique uniquement si `use` fait référence à un élément `<svg>` ou `<symbol>`.

**Note :** À partir de SVG2, `width` est une propriété *géométrique*, ce qui signifie que cet attribut peut également être utilisé comme propriété CSS sur les éléments utilisés.

Spécifications
--------------

| Spécification | État | Commentaires |
| --- | --- | --- |
| Filter Effects Module Level 1 — La définition de 'width' dans cette spécification. | Version de travail | Définition de `<filter>` |
| Filter Effects Module Level 1 — La définition de 'width' dans cette spécification. | Version de travail | Définition des primitives de filtre |
| CSS Masking Module Level 1 — La définition de 'width' dans cette spécification. | Candidat au statut de recommandation | Définition de `<mask>` |
| Scalable Vector Graphics (SVG) 2 — La définition de 'width' dans cette spécification. | Candidat au statut de recommandation | Définition en tant que propriété géométrique |
| Scalable Vector Graphics (SVG) 2 — La définition de 'width' dans cette spécification. | Candidat au statut de recommandation | Définition de `<pattern>` |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) — La définition de 'width' dans cette spécification. | Recommandation | Définition initiale de `<foreignObject>` |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) — La définition de 'width' dans cette spécification. | Recommandation | Définition initiale de `<pattern>` |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) — La définition de 'width' dans cette spécification. | Recommandation | Définition initiale de `<image>` |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) — La définition de 'width' dans cette spécification. | Recommandation | Définition initiale de `<svg>` |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) — La définition de 'width' dans cette spécification. | Recommandation | Définition initiale de `<use>` |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) — La définition de 'width' dans cette spécification. | Recommandation | Définition initiale de `<filter>` |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) — La définition de 'width' dans cette spécification. | Recommandation | Définition initiale des primitives de filtre |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) — La définition de 'width' dans cette spécification. | Recommandation | Définition initiale de `<mask>` |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) — La définition de 'width' dans cette spécification. | Recommandation | Définition initiale de `<rect>` |