X et y, propriété CSS pour les images SVG

Résumé des caractéristiques de la propriété `x`

Description rapide

Définit la position horizontale d'un rectangle ou d'une image, en SVG.

Statut

Standard

Utilisable sur

SVG

Pourcentages

Calculés par rapport à la largeur du viewport SVG.

Valeur initiale

0

Héritée par défaut

Non.

Type d'animation

Computed value : lors d'une animation, la propriété x passe progressivement d'une valeur à une autre.

Module W3C

Scalable Vector Graphics (SVG)

Références (W3C)

Scalable Vector Graphics (SVG)

Statut du document: CR (document candidat à la recommandation)

Description des propriétés `x` et `y`.

Les propriétés x et y définissent la position d'un rectangle ou d'une image en SVG. Elles sont équivalentes aux attributs x et y, mais avec en plus la possibilité d'utiliser des unités CSS.
x définit la position horizontale du rectangle, et y sa position verticale.

Remarque : les attributs et propriétés x et y sont utilisables sur les balises SVG rect, image et foreignObject,

Valeurs pour `x` ou `y`.

x: 50px; y: 50%;

x et y acceptent soit un nombre suivi d'une des unités de dimension, soit un pourcentage. Dans ce dernier cas, le pourcentage est calculé par rapport à la largeur de l'élément parent pour x, et par rapport à sa hauteur pour y

Valeurs standards :


x: initial  (0)
x: inherit
x: revert
x: revertLayer
x: unset


y: initial  (0)
y: inherit
y: revert
y: revertLayer
y: unset

Pour plus d'informations, reportez-vous aux pages de présentation de ces différentes valeurs : initial, inherit, revert, revert-layer, unset.

Animation des propriétés `x` et `y`.

Les propriétés x et y peuvent facilement être animées en CSS. Il y a aussi la possibilité de faire appel aux animations SVG (balise animate) mais avec une syntaxe plus lourde.

Une seule animation @keyframes a été définie et appliquée aux trois rectangles avec des durées différentes, ce qui donne cette impression de course.

Simulateur avec la propriété `x`.

Le rectangle est initialement positionné à 10% du bord gauche et du bord haut. Son parent (le cadre SVG) mesure 200 pixels de large et 100 pixels de haut.

x :

y :

Compatibilité de `x` et `y` avec les navigateurs actuels.

Propriété
x

Propriété
y

Estimation de la prise en charge globale.

97%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Safari

Safari sur IOS

Chrome

Edge

Firefox

Chrome pour Androïd

Androïd Brower

Firefox pour Androïd

Samsung Internet

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique des propriétés `x` et `y`.

SVG (Scalable Vector Graphics)

Traduction en propriétés CSS des attributs x et y de SVG.

28 Août 2012
Document de travail.
15 Septembre 2016
Candidat à la recommandation.

Autres propriétés relatives à SVG.

Quelques propriétés CSS sont spécifiques à la mise en forme d'objets SVG.

Propriétés :

Définit la position horizontale du centre d'un cercle ou d'une ellipse en SVG.

Définit la position verticale du centre d'un cercle ou d'une ellipse en SVG.

Définit la position verticale d'un rectangle ou d'une image, en SVG.