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 ausgedrückt werden, die durch den CSS-<length>-Datentyp erlaubt ist. Negative Werte sind ungültig.

<percentage>

Prozentsätze beziehen sich auf die normierte Diagonale des aktuellen SVG-Viewports, die wie folgt berechnet wird: $\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 haben wir zwei identische <circle>-Elemente in einem SVG, jedes mit einem Radius von 10 und denselben 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, sodass der zweite Kreis die Standardstile verwendet (mit fill, das standardmäßig auf schwarz eingestellt ist). Wir verwenden die r-Eigenschaft, um den Wert des SVG-r-Attributs zu überschreiben, und geben ihm eine Füllfarbe und einen stroke. Die Standardgröße eines SVG beträgt 300px in der Breite und 150px in der Höhe.

svg {
  border: 1px solid black;
}

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

ViewBox versus Viewport-Pixel

Dieses Beispiel enthält zwei SVGs, jede mit zwei <circle>-Elementen. Das zweite SVG enthält ein viewBox-Attribut, um den Unterschied zwischen SVG viewBox und SVG-Viewports zu demonstrieren.

<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 ist ähnlich wie im vorherigen Beispiel, mit r: 30px eingestellt, aber wir setzen eine width, um sicherzustellen, dass die Bilder jeweils 300px breit sind:

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

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

Da das viewBox-Attribut das SVG als 200 SVG-Koordinatensystem-Pixel in der Breite definiert und das Bild auf 300px skaliert wird, werden die 30 SVG-Koordinaten-Pixel so skaliert, dass sie als 45 CSS-Pixel dargestellt werden.

Den Radius eines Kreises unter Verwendung von Prozentsätzen definieren

In diesem Beispiel verwenden wir dieselbe Markierung wie im vorherigen Beispiel. Der einzige Unterschied ist der r-Wert; in diesem Fall 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 normierten Diagonale des SVG-Viewports. Der Radius r entspricht $0.3\times \frac{\sqrt{{\mathrm{<width>}}^2+{\mathrm{<height>}}^2}}{\sqrt{2}}$. Während das erste Bild 300 und 150 CSS-Pixel verwendet und das zweite 200 und 100 SVG-ViewBox-Einheiten, ist 30% ein proportionaler Wert. Daher ist der r-Wert derselbe: 47,43 ViewBox-Einheiten, was 71,15 CSS-Pixeln entspricht.

Obwohl der r-Wert derselbe ist, unterscheiden sich die Mittelpunkte, da das zweite SVG um 50% vergrößert wird, wodurch sein Mittelpunkt um 50% nach unten und nach rechts verschoben wird.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Geometrieeigenschaften: r, cx, cy, rx, ry, x, y, width, height
• fill
• stroke
• paint-order
• border-radius Kurzform-Eigenschaft
• radial-gradient
• <basic-shape> Datentyp
• SVG-r-Attribut