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 :

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>
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>\|<percentage>
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>\|<percentage>
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>\|<percentage>
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>\|<percentage>
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>\|<percentage>
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>\|<percentage>
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>\|<percentage>
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>\|<percentage>
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>\|<percentage>
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>\|<percentage>
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>\|<percentage>
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>\|<percentage>
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>\|<percentage>
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>\|<percentage>
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>\|<percentage>
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>\|<percentage>
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>\|<percentage>
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>\|<percentage>
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>\|<percentage>
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 de l'élément <filter>.

Valeur	<number>
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>\|<percentage>
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 de l'élément <filter>.

Valeur	<number>
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>\|<percentage>
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>\|<percentage>
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>\|<percentage>
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>\|<percentage>
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> est déprécié et ne devrait pas être utilisé.

Pour <glyphRef>, x définit l'abscisse du glyphe.

Valeur	<number>
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>\|<percentage>
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.

Valeur	<length>\|<percentage>
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 et patternTransform.

Valeur	<length>
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>\|<percentage>
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>\|<percentage>
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>.

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>\|<percentage>)
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> est déprécié et ne devrait plus être utilisé.

Pour <tref>, 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.

Valeur	Liste de valeurs (<length>\|<percentage>)
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.

Valeur	Liste de valeurs (<length>\|<percentage>)
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>\|<percentage>
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>`