r

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Das Attribut r definiert den Radius eines Kreises.

Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:

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

circle

Bei <circle> definiert r den Radius des Kreises und damit seine Größe. Bei einem Wert kleiner oder gleich null wird der Kreis nicht gezeichnet.

Wert	<length> \| <percentage>
Standardwert	`0`
Animierbar	Ja

Hinweis: Der Radius eines <circle> kann auch mit der Geometrie-Eigenschaft r definiert werden.

radialGradient

Bei <radialGradient> definiert r den Radius des Endkreises des radialen Farbverlaufs.

Der Farbverlauf wird so gezeichnet, dass der Farbverlaufsstopp bei 100 % auf den Umfang dieses Endkreises abgebildet wird. Bei einem Wert kleiner oder gleich null wird der Bereich einfarbig mit der Farbe und Deckkraft des letzten <stop> des Farbverlaufs gefüllt.

Wert	<length>
Standardwert	`50%`
Animierbar	Ja

Beispiel

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
  <radialGradient r="0" id="myGradient000">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>
  <radialGradient r="50%" id="myGradient050">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>
  <radialGradient r="100%" id="myGradient100">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>

  <circle cx="50" cy="50" r="0" />
  <circle cx="150" cy="50" r="25" />
  <circle cx="250" cy="50" r="50" />

  <rect x="20" y="120" width="60" height="60" fill="url(#myGradient000)" />
  <rect x="120" y="120" width="60" height="60" fill="url(#myGradient050)" />
  <rect x="220" y="120" width="60" height="60" fill="url(#myGradient100)" />
</svg>

Spezifikationen

Spezifikation
Scalable Vector Graphics (SVG) 2 # RProperty
Scalable Vector Graphics (SVG) 2 # RadialGradientElementRAttribute

CSS-Eigenschaft r

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

r

circle

radialGradient

Beispiel

Spezifikationen

Browser-Kompatibilität

svg.elements.circle.r

svg.elements.radialGradient.r

Siehe auch

Help improve MDN