x
=

L'attribut **`x`** définit une coordonnée en abscisse dans le système de coordonnées de l'utilisatrice ou l'utilisateur.

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

* `<altGlyph>`
* `<cursor>` (en-US)
* `<feBlend>`
* `<feColorMatrix>`
* `<feComponentTransfer>`
* `<feComposite>`
* `<feConvolveMatrix>`
* `<feDiffuseLighting>`
* `<feDisplacementMap>`
* `<feDropShadow>`
* `<feFlood>`
* `<feFuncA>`
* `<feFuncB>`
* `<feFuncG>`
* `<feFuncR>`
* `<feGaussianBlur>`
* `<feImage>`
* `<feMerge>`
* `<feMergeNode>`
* `<feMorphology>`
* `<feOffset>`
* `<fePointLight>`
* `<feSpecularLighting>`
* `<feSpotLight>`
* `<feTile>`
* `<feTurbulence>`
* `<filter>`
* `<foreignObject>`
* `<glyphRef>` (en-US)
* `<image>`
* `<mask>`
* `<pattern>`
* `<rect>`
* `<svg>`
* `<symbol>`
* `<text>`
* `<tref>` (en-US)
* `<tspan>`
* `<use>`
Exemple
-------
```

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



```html
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="20" width="60" height="60" />
  <rect x="120" y="20" width="60" height="60" />
  <rect x="220" y="20" width="60" height="60" />
</svg>
```

`<altGlyph>`
------------

**Attention :** Avec SVG2, `<altGlyph>` est déprécié et ne devrait pas être utilisé.

Pour `<altGlyph>`, `x` définit l'abscisse du glyphe alternatif.

|  |  |
| --- | --- |
| Valeur | Une liste de valeurs **<length> (en-US)** |
| Valeur par défaut | *Aucune* |
| Peut être animé | Oui |

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

Pour `<feBlend>`, `x` définit l'abscisse minimale de la zone de rendu de la primitive.

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

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

Pour `<feColorMatrix>`, `x` définit l'abscisse minimale de la zone de rendu de la primitive.

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

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

Pour `<feComponentTransfer>`, `x` définit l'abscisse minimale de la zone de rendu de la primitive.

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

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

Pour `<feComposite>`, `x` définit l'abscisse minimale de la zone de rendu de la primitive.

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

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

Pour `<feConvolveMatrix>`, `x` définit l'abscisse minimale de la zone de rendu de la primitive.

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

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

Pour `<feDiffuseLighting>`, `x` définit l'abscisse minimale de la zone de rendu de la primitive.

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

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

Pour `<feDisplacementMap>`, `x` définit l'abscisse minimale de la zone de rendu de la primitive.

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

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

Pour `<feDropShadow>`, `x` définit l'abscisse minimale de la zone de rendu de la primitive.

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

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

Pour `<feFlood>`, `x` définit l'abscisse minimale de la zone de rendu de la primitive.

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

`<feFuncA>`
-----------

Pour `<feFuncA>`, `x` définit l'abscisse minimale de la zone de rendu de la primitive.

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

`<feFuncB>`
-----------

Pour `<feFuncB>`, `x` définit l'abscisse minimale de la zone de rendu de la primitive.

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

`<feFuncG>`
-----------

Pour `<feFuncG>`, `x` définit l'abscisse minimale de la zone de rendu de la primitive.

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

`<feFuncR>`
-----------

Pour `<feFuncR>`, `x` définit l'abscisse minimale de la zone de rendu de la primitive.

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

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

Pour `<feGaussianBlur>`, `x` définit l'abscisse minimale de la zone de rendu de la primitive.

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

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

Pour `<feImage>`, `x` définit l'abscisse minimale de la zone de rendu de la primitive.

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

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

Pour `<feMerge>`, `x` définit l'abscisse minimale de la zone de rendu de la primitive.

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

`<feMergeNode>`
---------------

Pour `<feMergeNode>`, `x` définit l'abscisse minimale de la zone de rendu de la primitive.

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

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

Pour `<feMorphology>`, `x` définit l'abscisse minimale de la zone de rendu de la primitive.

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

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

Pour `<feOffset>`, `x` définit l'abscisse minimale de la zone de rendu de la primitive.

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

`<fePointLight>`
----------------

Pour `<fePointLight>`, `x` définit l'emplacement horizontal de la source de lumière dans le système de coordonnées définit par l'attribut `primitiveUnits` (en-US) de l'élément `<filter>`.

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

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

Pour `<feSpecularLighting>`, `x` définit l'abscisse minimale de la zone de rendu de la primitive.

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

`<feSpotLight>`
---------------

Pour `<feSpotLight>`, `x` définit l'emplacement horizontal de la source de lumière dans le système de coordonnées définit par l'attribut `primitiveUnits` (en-US) de l'élément `<filter>`.

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

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

Pour `<feTile>`, `x` définit l'abscisse minimale de la zone de rendu de la primitive.

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

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

Pour `<feTurbulence>`, `x` définit l'abscisse minimale de la zone de rendu de la primitive.

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

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

Pour `<filter>`, `x` définit l'abscisse du coin supérieur gauche de la zone de rendu du filtre.

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

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

Pour `<foreignObject>`, `x` définit l'abscisse du coin supérieur gauche de sa zone d'affichage (*viewport*).

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

**Note :** À partir de SVG2, `x` est une propriété *géométrique*, ce qui signifie qu'il peut être utilisé comme propriété CSS pour `<foreignObject>`.

`<glyphRef>`
------------

**Attention :** À partir de SVG2, `<glyphRef>` (en-US) est déprécié et ne devrait pas être utilisé.

Pour `<glyphRef>` (en-US), `x` définit l'abscisse du glyphe.

|  |  |
| --- | --- |
| Valeur | **<number> (en-US)** |
| Valeur par défaut | `0` pour le premier `<glyphRef>`, et l'abscisse de fin du `<glyphRef>` précédent pour ceux qui suivent. |
| Peut être animé | Oui |

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

Pour `<image>`, `x` définit l'abscisse du coin supérieur gauche de l'image.

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

**Note :** À partir de SVG2, `x` est une propriété *géométrique*, ce qui signifie qu'il peut être utilisé comme propriété CSS pour les images.

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

Pour `<mask>`, `x` définit l'abscisse du coin supérieur gauche de sa zone d'effet. L'effet exact de cet attribut est influencé par la valeur de l'attribut `maskUnits` (en-US).

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

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

Pour `<pattern>`, `x` définit l'abscisse du coin supérieur gauche de la tuile du motif. 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>`, `x` définit l'abscisse du coin supérieur gauche de la forme.

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

**Note :** À partir de SVG2, `x` est une propriété *géométrique*, ce qui signifie qu'il peut être utilisé comme propriété CSS pour les rectangles.

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

Pour `<svg>`, `x` définit l'abscisse du coin supérieur gauche de la zone d'affichage (*viewport*).

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

**Note :** À partir de SVG2, `x` est une propriété *géométrique*, ce qui signifie qu'il peut être utilisé comme propriété CSS pour `<svg>`.

`<text>`
--------

Pour `<text>`, si l'élément contient une seule valeur, `x` définit l'abscisse où *la position du contenu texte* doit être placée. *La position du contenu texte* est généralement un point sur la ligne de base de la première ligne de texte. La valeur exacte de *la position du contenu texte* est influencée par des propriétés comme `text-anchor` ou `direction`.

S'il a plusieurs valeurs, `x` définit l'abscisse individuelle de chaque glyphe du texte. S'il y a moins de valeurs que de glyphes, les glyphes restants sont placés dans la continuité du dernier glyphe positionné. S'il y a plus de valeurs que de glyphes, les valeurs supplémentaires sont ignorées.

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

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



```html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Une ligne horizontale pour matérialiser la ligne de base -->
  <line x1="0" y1="40%" x2="100%" y2="40%" />
  <line x1="0" y1="90%" x2="100%" y2="90%" />

  <!-- Une ligne verticale pour matérialiser la position en x -->
  <line x1="25%" y1="0" x2="25%" y2="100%" />
  <line x1="50%" y1="0" x2="50%" y2="100%" />
  <line x1="75%" y1="0" x2="75%" y2="100%" />

  <!-- x avec une seule valeur -->
  <text y="40%" x="50%">SVG</text>

  <!-- x avec plusieurs valeurs -->
  <text y="90%" x="25%, 50%, 75%">SVG</text>
</svg>
```



```css
text {
  font: 40px sans-serif;
}

line {
  fill: none;
  stroke: red;
  stroke-width: 0.5px;
  stroke-dasharray: 2px;
}
```

`<tref>`
--------

**Attention :** Avec SVG2, `<tref>` (en-US) est déprécié et ne devrait plus être utilisé.

Pour `<tref>` (en-US), si l'élément contient une seule valeur, `x` définit l'abscisse où *la position du contenu texte* doit être placée. *La position du contenu texte* est généralement un point sur la ligne de base de la première ligne de texte. La valeur exacte de *la position du contenu texte* est influencée par des propriétés comme `text-anchor` ou `direction`.

S'il a plusieurs valeurs, `x` définit l'abscisse individuelle de chaque glyphe du texte. S'il y a moins de valeurs que de glyphes, les glyphes restants sont placés dans la continuité du dernier glyphe positionné. S'il y a plus de valeurs que de glyphes, les valeurs supplémentaires sont ignorées.

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

`<tspan>`
---------

Pour `<tspan>`, si l'élément contient une seule valeur, `x` définit l'abscisse où *la position du contenu texte* doit être placée. *La position du contenu texte* est généralement un point sur la ligne de base de la première ligne de texte. La valeur exacte de *la position du contenu texte* est influencée par des propriétés comme `text-anchor` ou `direction`.

S'il a plusieurs valeurs, `x` définit l'abscisse individuelle de chaque glyphe du texte. S'il y a moins de valeurs que de glyphes, les glyphes restants sont placés dans la continuité du dernier glyphe positionné. S'il y a plus de valeurs que de glyphes, les valeurs supplémentaires sont ignorées.

|  |  |
| --- | --- |
| Valeur | Liste de valeurs (**<length> (en-US)**|**<percentage> (en-US)**) |
| Valeur par défaut | *Aucune* |
| Peut être animé | Oui |
```

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



```html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Une ligne horizontale pour matérialiser la ligne de base -->
  <line x1="0" y1="40%" x2="100%" y2="40%" />
  <line x1="0" y1="90%" x2="100%" y2="90%" />

  <!-- Une ligne verticale pour matérialiser la position en x -->
  <line x1="25%" y1="0" x2="25%" y2="100%" />
  <line x1="50%" y1="0" x2="50%" y2="100%" />
  <line x1="75%" y1="0" x2="75%" y2="100%" />

  <text>
    <!-- x avec une seule valeur -->
    <tspan y="40%" x="50%">SVG</tspan>

    <!-- x avec plusieurs valeurs -->
    <tspan y="90%" x="25%, 50%, 75%">SVG</tspan>
  </text>
</svg>
```



```css
text {
  font: 40px sans-serif;
}

line {
  fill: none;
  stroke: red;
  stroke-width: 0.5px;
  stroke-dasharray: 2px;
}
```

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

Pour `<use>`, `x` définit l'abscisse du coin supérieur gauche de l'élément référencé.

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

**Note :** À partir de SVG2, `x` est une propriété *géométrique*, ce qui signifie qu'il peut être utilisé comme propriété CSS pour les éléments utilisés.

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

| Spécification | État | Commentaires |
| --- | --- | --- |
| Filter Effects Module Level 1 — La définition de 'x' dans cette spécification | Brouillon de travail | Définition de `<filter>` |
| Filter Effects Module Level 1 — La définition de 'x' dans cette spécification | Brouillon de travail | Définition de `<feSpotLight>` |
| Filter Effects Module Level 1 — La définition de 'x' dans cette spécification | Brouillon de travail | Définition de `<fePointLight>` |
| Filter Effects Module Level 1 — La définition de 'x' dans cette spécification | Brouillon de travail | Définition des primitives de filtre |
| CSS Masking Module Level 1 — La définition de 'x' dans cette spécification | Candidat au statut de recommandation | Définition de `<mask>` |
| Scalable Vector Graphics (SVG) 2 — La définition de 'x' dans cette spécification | Candidat au statut de recommandation | Définition comme propriété géométrique |
| Scalable Vector Graphics (SVG) 2 — La définition de 'x' dans cette spécification | Candidat au statut de recommandation | Définition de `<pattern>` |
| Scalable Vector Graphics (SVG) 2 — La définition de 'x' dans cette spécification | Candidat au statut de recommandation | Définition de `<text>` and `<tspan>` |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) — La définition de 'x' dans cette spécification | Recommandation | Définition initiale de `<cursor>` |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) — La définition de 'x' dans cette spécification | Recommandation | Définition initiale de `<foreignObject>` |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) — La définition de 'x' dans cette spécification | Recommandation | Définition initiale de `<pattern>` |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) — La définition de 'x' dans cette spécification | Recommandation | Définition initiale de `<image>` |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) — La définition de 'x' dans cette spécification | Recommandation | Définition initiale de `<svg>` |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) — La définition de 'x' dans cette spécification | Recommandation | Définition initiale de `<use>` |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) — La définition de 'x' dans cette spécification | Recommandation | Définition initiale de `<fePointLight>` |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) — La définition de 'x' dans cette spécification | Recommandation | Définition initiale de `<feSpotLight>` |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) — La définition de 'x' dans cette spécification | Recommandation | Définition initiale de `<filter>` |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) — La définition de 'x' dans cette spécification | Recommandation | Définition initiale des primitives de filtre |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) — La définition de 'x' dans cette spécification | Recommandation | Définition initiale de `<mask>` |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) — La définition de 'x' dans cette spécification | Recommandation | Définition initiale de `<altGlyph>` |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) — La définition de 'x' dans cette spécification | Recommandation | Définition initiale de `<glyphRef>` |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) — La définition de 'x' dans cette spécification | Recommandation | Définition initiale de `<text>` |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) — La définition de 'x' dans cette spécification | Recommandation | Définition initiale de `<tref>` et `<tspan>` |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) — La définition de 'x' dans cette spécification | Recommandation | Définition initiale de `<rect>` |