r

Syntaxe

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

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

Valeurs

Les valeurs de type <length> et <percentage> définissent le rayon du cercle.

<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 ne sont pas valides.

<percentage>

Les pourcentages se réfèrent à la diagonale normalisée de la fenêtre SVG actuelle, qui est calculée comme $\frac{\sqrt{{\mathrm{<width>}}^2+{\mathrm{<height>}}^2}}{\sqrt{2}}$.

Définition formelle

Syntaxe formelle

r = 
  <length-percentage>  

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

Exemples

Définir le rayon d'un cercle

Dans cet exemple, nous avons deux éléments <circle> identiques dans un SVG, chacun avec un rayon de 10 et les mêmes coordonnées x et y pour leurs points centraux.

<svg xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="10" />
  <circle cx="50" cy="50" r="10" />
</svg>

Avec CSS, nous stylons uniquement le premier cercle, permettant au deuxième cercle d'utiliser les styles par défaut (avec fill par défaut à noir). Nous utilisons la propriété r pour remplacer la valeur de l'attribut SVG r, en lui donnant un fill et stroke. La taille par défaut d'un SVG est de 300px de large et 150px de haut.

svg {
  border: 1px solid black;
}

circle:first-of-type {
  r: 30px;
  fill: lightgreen;
  stroke: black;
}

Différence entre viewBox et les pixels de la fenêtre d'affichage

Cet exemple contient deux SVG, chacun avec deux éléments <circle>. Le deuxième SVG inclut un attribut viewBox pour démontrer la différence entre le viewBox SVG et les fenêtres d'affichage SVG.

<svg xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="10" />
  <circle cx="50" cy="50" r="10" />
</svg>
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="10" />
  <circle cx="50" cy="50" r="10" />
</svg>

Le CSS est similaire à l'exemple précédent, avec r: 30px défini, mais nous définissons une width pour garantir que les images ont toutes deux une largeur de 300px :

svg {
  border: 1px solid black;
  width: 300px;
}

circle:first-of-type {
  r: 30px;
  fill: lightgreen;
  stroke: black;
}

Parce que l'attribut viewBox définit le SVG avec une largeur de 200 pixels dans le système de coordonnées SVG et que l'image est agrandie à 300px, les 30 pixels de coordonnées SVG sont mis à l'échelle pour être affichés sous forme de 45 pixels CSS.

Définir le rayon d'un cercle en utilisant des pourcentages

Dans cet exemple, nous utilisons le même balisage que dans l'exemple précédent. La seule différence est la valeur de r ; dans ce cas, nous utilisons une valeur en pourcentage.

<svg xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="10" />
  <circle cx="50" cy="50" r="10" />
</svg>
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="10" />
  <circle cx="50" cy="50" r="10" />
</svg>

svg {
  border: 1px solid black;
  width: 300px;
}

circle:first-of-type {
  r: 30%;
  fill: lightgreen;
  stroke: black;
}

Dans les deux cas, le rayon du cercle est de 30% de la diagonale normalisée de la fenêtre d'affichage SVG. Le rayon r est égal à $0.3\times \frac{\sqrt{{\mathrm{<width>}}^2+{\mathrm{<height>}}^2}}{\sqrt{2}}$. Alors que la première image utilise 300 et 150 pixels CSS et que la seconde utilise 200 et 100 unités de la boîte de vue SVG, 30% est une valeur proportionnelle. En conséquence, la valeur de r est la même : 47.43 unités de la boîte de vue, ce qui correspond à 71.15 pixels CSS.

Alors que le r est le même, les points centraux diffèrent parce que le second SVG est agrandi de 50%, décalant son centre vers le bas et vers la droite de 50%.

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les propriétés de géométrie : r, cx, cy, rx, 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 r