r

Das r-Attribut definiert den Radius eines Kreises.

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

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

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>

circle

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

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

Hinweis: Die Radiusgröße eines <circle> kann auch mit der r Geometrie-Eigenschaft definiert werden.

radialGradient

Für <radialGradient> definiert r den Radius des Endkreises für den radialen Verlauf.

Der Verlauf wird so gezeichnet, dass der 100% Verlaufsstopp auf den Umfang dieses Endkreises abgebildet wird. Ein Wert kleiner oder gleich null führt dazu, dass der Bereich als einheitliche Farbe unter Verwendung der Farbe und Deckkraft des letzten Verlauf-<stop>-Elements dargestellt wird.

Wert	<length>
Standardwert	`50%`
Animierbar	Ja

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # RadialGradientElementRAttribute

r

Beispiel

circle

radialGradient

Spezifikationen

Browser-Kompatibilität

svg.elements.circle.r

svg.elements.radialGradient.r