files/fr/web/svg/attribute/width/index.md


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

---
title: Width
slug: Web/SVG/Attribute/width
translation_of: Web/SVG/Attribute/width
---
« [SVG Attribute reference home](/fr/SVG/Attribute "en/SVG/Attribute")

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 {{ SVGElement("svg") }} dont la valeur par défaut est de 100% (exepté pour l'élément racine {{ SVGElement("svg") }} qui possède un parent HTML),  {{ SVGElement("filter") }} et {{ SVGElement("mask") }} dont la valeur par défaut est de 120%.

## Contexte d'utilisation

<table class="standard-table">
  <tbody>
    <tr>
      <th scope="row">Catégories</th>
      <td>Aucune</td>
    </tr>
    <tr>
      <th scope="row">Valeur</th>
      <td>
        <a
          href="/fr/SVG/Content_type#Length"
          title="https://developer.mozilla.org/en/SVG/Content_type#Length"
          >&#x3C;length></a
        >
      </td>
    </tr>
    <tr>
      <th scope="row">Animable</th>
      <td>Oui</td>
    </tr>
    <tr>
      <th scope="row">Document normatif</th>
      <td>
        <a
          href="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementWidthAttribute"
          >SVG 1.1 (2nd Edition): foreignObject element</a
        ><br /><a
          href="http://www.w3.org/TR/SVG/struct.html#ImageElementWidthAttribute"
          >SVG 1.1 (2nd Edition): image element</a
        ><br /><a
          href="http://www.w3.org/TR/SVG/pservers.html#PatternElementWidthAttribute"
          >SVG 1.1 (2nd Edition): pattern element</a
        ><br /><a
          href="http://www.w3.org/TR/SVG/shapes.html#RectElementWidthAttribute"
          >SVG 1.1 (2nd Edition): rect element</a
        ><br /><a
          href="http://www.w3.org/TR/SVG/struct.html#SVGElementWidthAttribute"
          >SVG 1.1 (2nd Edition): svg element</a
        ><br /><a
          href="http://www.w3.org/TR/SVG/struct.html#UseElementWidthAttribute"
          >SVG 1.1 (2nd Edition): use element</a
        ><br /><a
          href="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveWidthAttribute"
          >SVG 1.1 (2nd Edition): Filter primitive</a
        ><br /><a
          href="http://www.w3.org/TR/SVG/masking.html#MaskElementWidthAttribute"
          >SVG 1.1 (2nd Edition): mask element</a
        >
      </td>
    </tr>
  </tbody>
</table>

{{ page("fr/docs/Web/SVG/Content_type","Length") }}

## Exemple

```xml
<?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`&nbsp;:

- [Filter primitive elements](/fr/SVG/Element#FilterPrimitive "en/SVG/Element#FilterPrimitive")&nbsp;»
- {{ SVGElement("filter") }}
- {{ SVGElement("foreignObject") }}
- {{ SVGElement("image") }}
- {{ SVGElement("pattern") }}
- {{ SVGElement("rect") }}
- {{ SVGElement("svg") }}
- {{ SVGElement("use") }}
- {{ SVGElement("mask") }}