r

Das r-Attribut definiert den Radius eines Kreises.

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

Prozentsätze 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 seine Größe. Bei einem Wert gleich oder kleiner als null wird der Kreis überhaupt nicht gezeichnet.

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

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%-Verlauffarbstopp auf den Umfang dieses Endkreises abgebildet wird. Ein Wert kleiner oder gleich null bewirkt, dass der Bereich in einer einzigen Farbe unter Verwendung der Farbe und der Opazität des letzten Verlauf-<stop>-Elements gefärbt wird.

Wert	<length> \| <percentage>
Standardwert	`50%`
Animierbar	Yes

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # R
Scalable Vector Graphics (SVG) 2 # RadialGradientElementRAttribute