x

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2020.

La propriétéCSSx définit la coordonnée de l'axe x du coin supérieur gauche de l'élément de forme SVG<rect>, d'image<image>, de fenêtre<foreignObject> et de l'élément imbriqué<svg> par rapport au plus proche<svg> présent dans lesystème de coordonée. S'il est présent, il remplace l'attributx.

Note :La propriétéx ne s'applique qu'aux éléments<rect>,<image>,<foreignObject>, et<svg> imbriqués dans un élément<svg>. Il n'a aucun effet sur les zones<svg> extérieures et ne s'applique pas aux autres éléments SVG ni aux éléments ou pseudo-éléments HTML.

Syntaxe

css

/* Valeurs de longueur et en pourcentage */x: 40px;x: 40%;/* Valeurs globales */x: inherit;x: initial;x: revert;x: revert-layer;x: unset;

Valeurs

La longueur<length> et le pourcentage<percentage> indiquent la position des coordonnées de l'axe des x du coin supérieur gauche de l'élément SVG.

<length>: En tant que longueur absolue ou relative, elle peut être exprimée dans n'importe quelle unité autorisée par le type de données CSS<length>.
<percentage>: Les pourcentages se réfèrent à la hauteur du SVGviewBox, s'il est déclaré, sinon, le pourcentage fait référence à la hauteur de la fenêtre SVG actuelle.

Définition formelle

Valeur initiale	`0`
Applicabilité	éléments`<svg>`,`<rect>`,`<image>` et`<foreignObject>` dans`<svg>`
Héritée	non
Pourcentages	se rapporte à la largeur de la zone d'affichage (viewport) SVG actuelle
Valeur calculée	le pourcentage tel que défini ou une longueur absolue
Type d'animation	par type de valeur calculée

Syntaxe formelle

x =
<length-percentage>

<length-percentage> =
<length>|
<percentage>

Exemples

Définition des coordonnées de l'axe x des formes SVG

Cet exemple illustre le cas d'utilisation de base dex, et comment la propriété CSSx a préséance sur l'attributx.

HTML

Nous incluons quatre SVG identiques de l'élément<rect> ; leurs valeurs des attributsx ety sont toutes de10, ce qui signifie que les quatre rectangles sont tous au même endroit,10px en haut et à gauche de la fenêtre SVG.

html

<svg xmlns="http://www.w3.org/2000/svg">  <rect width="100" height="100" x="10" y="10" />  <rect width="100" height="100" x="10" y="10" />  <rect width="100" height="100" x="10" y="10" />  <rect width="100" height="100" x="10" y="10" /></svg>

CSS

Nous stylisons tous les rectangles pour qu'ils aient une bordure noire et soient légèrement transparents, de sorte que les rectangles qui se chevauchent soient visibles. Nous fournissons aux rectangles différents remplissagesfill et valeurs enx.

css

svg {  border: 1px solid;  width: 300px;}rect {  fill: none;  stroke: black;  opacity: 0.8;}rect:nth-of-type(2) {  x: 3em;  fill: red;}rect:nth-of-type(3) {  x: 180px;  fill: yellow;}rect:nth-of-type(4) {  x: 50%;  fill: orange;}

Résultats

Les bords gauches des rectangles sont à10 (à partir de l'attribut),3em,180px, et50%, respectivement. Le SVG est de300px de large, de sorte que le côté gauche du dernier rectangle est la marque des150px.