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: .
Beispiel
<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 |