Cx et cy, propriété CSS pour les images SVG

Description des propriétés cx et cy.

Les propriétés cx et cy définissent la position du centre d'un cercle ou d'une ellipse sur une image SVG. Elles sont équivalentes aux attributs cx et cy, mais offrent la possibilité d'utiliser n'importe laquelle des unités CSS.
Comme on peut s'y attendre, cx définit la position horizontale du centre, et cy sa position verticale.

Remarque : les attributs cx et cy sont utilisables sur les balises SVG circle, ellipse et radialGradient, mais les propriétés CSS ne sont valides que pour les cercles et les ellipses.

Valeurs pour cx ou cy.

• cx: 50px; cy: 50%;

  cx et cy 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 cx et par rapport à sa hauteur pour cy

• cx: initial; (0) cx: inherit; cx: revert; cx: revertLayer; cx: unset;

  cy: initial; (0) cy: inherit; cy: revert; cy: revertLayer; cy: 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 cx et cy.

Les propriétés cx et cy peuvent très facilement être animées en CSS. Cela évite de faire appel aux animations SVG (balise animate) assez lourdes du point de vue syntaxe.

Les durées de chacune des trois animations ont été fixées à trois nombres premiers entre eux, ce qui donne l'impression de mouvements aléatoires.

Simulateur avec la propriété cx.

L'ellipse est initialement positionnée à 50% aussi bien horizontalement que verticalement. Son parent (le cadre SVG) mesure 200 pixels de large et 100 pixels de haut.

Compatibilité de cx et cy avec les navigateurs actuels.

1

Propriété
cx

2

Propriété
cy

Estimation de la prise en charge globale.

95%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra

Samsung Internet

Opéra Mobile

QQ Browser

Baidu Browser

Safari sur IOS

Safari

Firefox

Edge

Chrome

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

KaiOS Browser

Opéra mini

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

Caniuse

Caniuse

Historique des propriétés cx et cy.

• SVG (Scalable Vector Graphics)

  Définition des propriétés cx et cy à l'image des attributs du même nom.
  

  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 :