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 normierte 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 somit seine 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 Geometrieeigenschaft 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 in einer einzigen Farbe unter Verwendung der Farbe und Deckkraft des letzten <stop> des Verlaufs eingefärbt wird.

Wert	<length>
Standardwert	`50%`
Animierbar	Ja

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # RadialGradientElementRAttribute

CSS-Eigenschaft r

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

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

r

Beispiel

circle

radialGradient

Spezifikationen

Browser-Kompatibilität

svg.elements.circle.r

svg.elements.radialGradient.r

Siehe auch

Help improve MDN