r

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 von der CSS-Datentyp <length> erlaubten Einheit ausgedrückt werden. Negative Werte sind ungültig.

<percentage>

Prozentsätze beziehen sich auf die normalisierte Diagonale des aktuellen SVG-Ansichtsfensters, die als $\frac{\sqrt{{\mathrm{<width>}}^2+{\mathrm{<height>}}^2}}{\sqrt{2}}$ berechnet wird.

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-Achsenkoordinaten 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 stylen wir nur den ersten Kreis, sodass der zweite Kreis die Standardstile verwendet (wobei (fill standardmäßig auf Schwarz gesetzt ist). Wir verwenden die r-Eigenschaft, um den Wert des SVG-Attributes r zu überschreiben, es mit einem fill und stroke zu versehen. Die Standardgröße eines SVG ist 300px breit und 150px hoch.

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

ViewBox im Vergleich zu Ansichtsfenster-Pixeln

Dieses Beispiel enthält zwei SVGs, jedes mit zwei <circle>-Elementen. Das zweite SVG enthält ein viewBox-Attribut, um den Unterschied zwischen SVG-ViewBox und SVG-Ansichtsfenstern 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, wobei r: 30px gesetzt ist, aber wir setzen eine width, um sicherzustellen, dass die Bilder beide 300px breit sind:

svg { border: 1px solid black; width: 300px; } circle:first-of-type { r: 30px; fill: lightgreen; stroke: black; } 

Weil das viewBox-Attribut das SVG als 200 SVG-Koordinatensystem-Pixel breit definiert und das Bild auf 300px skaliert wird, werden die 30 SVG-Koordinatensystem-Pixel skaliert, um als 45 CSS-Pixel gerendert zu werden.

Den Radius eines Kreises mit Prozentsätzen definieren

In diesem Beispiel verwenden wir das gleiche Markup 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 normalisierten Diagonale des SVG-Ansichtsfensters. Der Radius r ist gleich $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. Dadurch ist der r-Wert derselbe: 47.43 ViewBox-Einheiten, was 71.15 CSS-Pixeln entspricht.

Obwohl der r derselbe ist, unterscheiden sich die Mittelpunkte, da das zweite SVG um 50 % skaliert ist, wodurch sein Zentrum um 50 % nach unten und nach rechts verschoben wird.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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