rx

Syntaxe

/* Valeur initiale */
rx: auto;

/* Valeurs de longueur et de pourcentage */
rx: 20px;
rx: 20%;

/* Valeurs globales */
rx: inherit;
rx: initial;
rx: revert;
rx: revert-layer;
rx: unset;

Valeurs

La valeur de type <length>, <percentage>, ou le mot-clé auto désigne le rayon horizontal des ellipses et le rayon de bordure horizontal des rectangles.

<length>

Les longueurs absolues ou relatives peuvent être exprimées dans n'importe quelle unité autorisée par le type de données CSS <length>. Les valeurs négatives sont invalides.

<percentage>

Les pourcentages se réfèrent à la largeur de la fenêtre SVG actuelle. La valeur utilisée pour un <rect> n'est jamais supérieure à 50% de la largeur du rectangle.

auto

Lorsque la valeur est définie sur auto ou par défaut, la valeur de rx est égale à la valeur absolue utilisée pour ry. Si rx et ry ont tous deux une valeur calculée de auto, la valeur utilisée est 0.

Définition formelle

Syntaxe formelle

rx = 
  <length-percentage>  |
  auto                 

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

Exemples

Créer des coins arrondis

Cet exemple montre comment créer des rectangles avec des coins arrondis en appliquant la propriété rx aux éléments <rect> SVG.

HTML

Nous incluons une image SVG avec quatre éléments <rect> ; tous les rectangles sont identiques sauf pour la valeur de leur attribut x, qui les positionne le long de l'axe x.

<svg xmlns="http://www.w3.org/2000/svg">
  <rect width="50" height="120" y="5" x="5" />
  <rect width="50" height="120" y="5" x="60" />
  <rect width="50" height="120" y="5" x="115" />
  <rect width="50" height="120" y="5" x="170" />
  <rect width="50" height="120" y="5" x="225" />
</svg>

CSS

Avec CSS, nous définissons une valeur rx sur quatre des rectangles :

svg {
  border: 1px solid;
}

rect:nth-of-type(2) {
  rx: 10px;
  fill: red;
}

rect:nth-of-type(3) {
  rx: 2em;
  fill: blue;
}

rect:nth-of-type(4) {
  rx: 5%;
  fill: orange;
}

rect:nth-of-type(5) {
  rx: 80%;
  fill: green;
}

Résultats

Le premier rectangle utilise la valeur par défaut auto ; comme toutes les valeurs ry de cet exemple utilisent également auto par défaut, la valeur utilisée de rx est 0. Les rectangles rouge et bleu ont des coins arrondis de 10px et 2em, respectivement. Comme la fenêtre SVG par défaut est de 300px par 150px, la valeur de 5% du rectangle orange crée un rayon de 15px. Le rectangle vert a rx: 80% défini. Cependant, comme la valeur de rx n'est jamais supérieure à 50% de la largeur du rectangle, l'effet est comme si rx: 50%; ry: 50% était défini.

Définir le rayon horizontal d'une ellipse

Cet exemple de base <ellipse> montre comment la propriété CSS rx prend le pas sur un attribut SVG rx pour définir le rayon horizontal de la forme.

HTML

Nous incluons deux éléments <ellipse> identiques dans un SVG ; chacun avec l'attribut rx défini sur 20.

<svg xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="80" cy="50" rx="20" ry="40" />
  <ellipse cx="80" cy="50" rx="20" ry="40" />
</svg>

CSS

Nous mettons en forme uniquement la première ellipse, laissant sa jumelle utiliser les styles par défaut de l'agent utilisateur (avec fill par défaut à noir). La propriété géométrique rx remplace la valeur de l'attribut SVG rx. Nous définissons également les propriétés fill et stroke pour différencier la mise en forme de sa jumelle.

svg {
  border: 1px solid;
}

ellipse:first-of-type {
  rx: 80px;
  fill: magenta;
  stroke: rebeccapurple;
}

Résultat

Le rayon horizontal de l'ellipse mise en forme est de 80px, comme défini dans la valeur de la propriété CSS rx. Le rayon horizontal de l'ellipse non mise en forme est de 20px, défini par l'attribut rx.

Valeurs en pourcentage du rayon horizontal d'une ellipse

Cet exemple montre comment utiliser des valeurs en pourcentage pour rx.

HTML

Nous utilisons le même balisage que dans l'exemple précédent.

<svg xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="80" cy="50" rx="20" ry="40" />
  <ellipse cx="80" cy="50" rx="20" ry="40" />
</svg>

CSS

Le CSS est similaire à l'exemple précédent, la seule différence étant la valeur de la propriété rx ; dans ce cas, nous utilisons une valeur en pourcentage.

svg {
  border: 1px solid;
}

ellipse:first-of-type {
  rx: 30%;
  fill: magenta;
  stroke: rebeccapurple;
}

Résultat

Lorsque vous utilisez des valeurs en pourcentage pour rx, les valeurs sont relatives à la largeur de la fenêtre SVG. Ici, la taille du rayon horizontal de l'ellipse stylée est de 30% de la largeur de la fenêtre SVG actuelle. Comme la largeur par défaut est de 300px, la valeur de rx est de 90px.

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les propriétés de géométrie : rx, cx, cy, r, ry, x, y, width, height
• La propriété fill
• La propriété stroke
• La propriété paint-order
• La propriété raccourcie border-radius
• La fonction radial-gradient()
• Le type de donnée <basic-shape>
• L'attribut SVG rx