r CSS property

Syntax

/* Length and percentage values */
r: 3px;
r: 20%;

/* Global values */
r: inherit;
r: initial;
r: revert;
r: revert-layer;
r: unset;

Werte

Die Werte <length> und <percentage> definieren den Radius des Kreises.

<length>

Absolute oder relative Längen können in jeder Einheit angegeben werden, die der CSS-Datentyp <length> zulässt. Negative Werte sind ungültig.

<percentage>

Prozentwerte beziehen sich auf die normalisierte Diagonale des aktuellen SVG-Viewports. Diese wird wie folgt berechnet: $\frac{\sqrt{{\mathrm{<width>}}^2+{\mathrm{<height>}}^2}}{\sqrt{2}}$.

Formale Definition

Formale Syntax

r = 
  <length-percentage>  

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

Beispiele

Den Radius eines Kreises definieren

In diesem Beispiel gibt es zwei identische <circle>-Elemente in einem SVG. Beide haben einen Radius von 10 und dieselben x- und y-Koordinaten für ihre Mittelpunkte.

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

Mit CSS gestalten wir nur den ersten Kreis. Der zweite Kreis behält die Standardstile bei (fill ist standardmäßig schwarz). Mit der Eigenschaft r überschreiben wir den Wert des SVG-Attributs r und legen außerdem fill und stroke fest. Ein SVG ist standardmäßig 300px breit und 150px hoch.

svg {
  border: 1px solid black;
}

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

ViewBox im Vergleich zu Viewport-Pixeln

Dieses Beispiel enthält zwei SVGs mit jeweils zwei <circle>-Elementen. Das zweite SVG hat ein viewBox-Attribut, um den Unterschied zwischen der SVG-ViewBox und dem SVG-Viewport zu veranschaulichen.

<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>

Das CSS ähnelt dem vorherigen Beispiel: r: 30px ist festgelegt. Zusätzlich legen wir eine width fest, damit beide Bilder 300px breit sind:

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

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

Da das Attribut viewBox die Breite des SVGs auf 200 Pixel im SVG-Koordinatensystem festlegt und das Bild auf 300px vergrößert wird, werden die 30 Pixel im SVG-Koordinatensystem so skaliert, dass sie als 45 CSS-Pixel dargestellt werden.

Den Radius eines Kreises mit Prozentwerten definieren

In diesem Beispiel verwenden wir dasselbe Markup wie im vorherigen Beispiel. Der einzige Unterschied ist der Wert von r: Hier verwenden wir einen Prozentwert.

<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;
}

In beiden Fällen beträgt der Kreisradius 30% der normalisierten Diagonale des SVG-Viewports. Der Radius r entspricht $0.3\times \frac{\sqrt{{\mathrm{<width>}}^2+{\mathrm{<height>}}^2}}{\sqrt{2}}$. Das erste Bild verwendet 300 und 150 CSS-Pixel, das zweite 200 und 100 SVG-ViewBox-Einheiten. Da 30 % ein proportionaler Wert sind, ist der Wert von r in beiden Fällen gleich: 47.43 ViewBox-Einheiten, was 71.15 CSS-Pixeln entspricht.

Obwohl r gleich ist, unterscheiden sich die Mittelpunkte: Das zweite SVG wird um 50 % vergrößert, wodurch sich sein Mittelpunkt um 50 % nach unten und nach rechts verschiebt.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Geometrie-Eigenschaften: r, cx, cy, rx, ry, x, y, width, height
• fill
• stroke
• paint-order
• Die Kurzschreibweise border-radius
• radial-gradient
• Der Datentyp <basic-shape>
• Das SVG-Attribut r