Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
r
Dasr 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:.
Beispiel
html,body,svg { height: 100%;}<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"> <radialGradient r="0"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialGradient> <radialGradient r="50%"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialGradient> <radialGradient r="100%"> <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> definiertr 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 derrGeometrieeigenschaft definiert werden.
radialGradient
Für<radialGradient> definiertr den Radius des Endkreises für den radialen Verlauf.
Der Verlauf wird so gezeichnet, dass der100% 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 |
Browser-Kompatibilität
svg.elements.circle.r
svg.elements.radialGradient.r
Siehe auch
- CSS-Eigenschaft
r