Dier-EigenschaftCSS definiert den Radius eines Kreises. Sie kann nur mit dem SVG-Element<circle> verwendet werden. Ist sie vorhanden, überschreibt sie dasr-Attribut des Kreises.

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 von10 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 dier-Eigenschaft, um den Wert des SVG-Attributesr zu überschreiben, es mit einemfill undstroke zu versehen. Die Standardgröße eines SVG ist300px breit und150px 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 einviewBox-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, wobeir: 30px gesetzt ist, aber wir setzen einewidth, um sicherzustellen, dass die Bilder beide300px breit sind:

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

Weil dasviewBox-Attribut das SVG als 200 SVG-Koordinatensystem-Pixel breit definiert und das Bild auf300px skaliert wird, werden die30 SVG-Koordinatensystem-Pixel skaliert, um als45 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 derr-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 Kreisradius30 % der normalisierten Diagonale des SVG-Ansichtsfensters. Der Radiusr ist gleich$0.3\times \frac{\sqrt{{\mathrm{<width>}}^2+{\mathrm{<height>}}^2}}{\sqrt{2}}$. Während das erste Bild300 und150 CSS-Pixel verwendet und das zweite200 und100 SVG-ViewBox-Einheiten, ist 30 % ein proportionaler Wert. Dadurch ist derr-Wert derselbe:47.43 ViewBox-Einheiten, was71.15 CSS-Pixeln entspricht.

Obwohl derr 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 Eigenschaftborder-radius
• radial-gradient
• <basic-shape> Datentyp
• SVG-Attributr