R - Propriété CSS

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

Description rapide

Définit le rayon d'un cercle en SVG.

Statut

Standard

Utilisable sur

SVG

Pourcentages

Calculés par rapport à la moyenne entre la largeur et la hauteur 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é r passe progressivement d'une valeur à une autre.

Module W3C

SVG (Scalable Vector Graphics)

Références (W3C)

Scalable Vector Graphics (SVG)

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

Description de la propriété `r`.

La propriété r définit le rayon d'un cercle en SVG. Elle s'applique à la balise circle.

Les propriétés rx et ry définissent le rayon d'une ellipse, respectivement dans la direction horizontale, et dans la direction verticale. Ces deux propriétés s'appliquent à la balise ellipse pour définir les rayons de l'ellipse et à la balise rect pour définir l'arrondi des angles du rectangle.

Valeurs pour `r`.

r: 50px;

La valeur doit être positive ou à la rigueur nulle, et être suivie d'une des unités de dimension. S'il s'agit d'un pourcentage il sera calculé par rapport à la moyenne de la largeur et de la hauteur du viewport SVG.

Valeurs pour `rx`.

rx: auto;

Lorsque la valeur de rx est auto, la propriété prend la valeur affectée à ry. L'ellipse est alors un cercle. Si ry est aussi fixée à la valeur auto, les deux propriétés valent 0.
rx: 50px;

La valeur doit être positive ou nulle, et être suivie d'une des unités de dimension. S'il s'agit d'un pourcentage il sera calculé de la façon suivante :
- Si la propriété rx est appliquée sur une ellipse, le pourcentage est calculé par rapport à la largeur du viewport SVG.
- Sur un rectangle, le pourcentage est calculé par rapport à la largeur du rectangle. Les valeurs supérieures à 50% sont ramenées à 50%.

Valeurs pour `ry`.

ry: auto;

Lorsque la valeur de ry est auto, la propriété prend la valeur de rx. Si cette dernière est aussi sur la valeur auto, les deux propriétés valent 0.
rx: 50px;

La valeur doit être positive ou nulle, et être suivie d'une des unités de dimension. S'il s'agit d'un pourcentage il sera calculé différemment suivant que la propriété est appliquée sur une balise ellipse ou sur une balise rect. D'autre part, sur un rectangle, les valeurs supérieures à 50% sont ramenée à 50%.
- Sur une ellipse, par rapport à la hauteur du viewport SVG.
- Sur un rectangle, par rapport à la hauteur du rectangle.

Valeurs standards :


r: initial  (0)
r: inherit
r: revert
r: revertLayer
r: 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 `r`, `rx` et `ry`.

Ces trois propriétés peuvent être animées, et de façon très fluide puisque leur valeur est numérique. Voici un exemple : les propriétés rx et ry évoluent en sens inverse : quand l'une augmente, l'autre diminue.

Simulateur avec la propriété `r`.

Le simulateur applique la propriété r au cercle, et les propriétés rx et ry à l'ellipse et au rectangle. Les dimensions du rectangle sont 80 x 60 pixels.

r :

rx :

auto

ry :

auto