SVG Radial
Beschreibung des <radialGradient>-Elements
Das <radialGradient>-Element definiert einen SVG-Radialverlauf, der auf Füll- und Strichgrafiken angewendet werden kann.
Das <radialGradient>-Element muss in ein <defs>-Element (für „Definitions“ oder „Definitionen“) eingebettet sein. Das <defs>-Element enthält Definitionen spezifischer Elemente (z. B. Verläufe).
Warnung
Verwechseln Sie einen SVG-Radialverlauf nicht mit der CSS radial-gradient-Funktion. CSS-Verläufe können auf den Hintergrund jedes Elements angewendet werden, während SVG-Verläufe nur auf SVG-Elemente angewendet werden können.
Beispiel für das SVG <radialGradient>-Element:
Beispiel für das SVG <radialGradient>-Element
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="300">
<defs>
<radialGradient id="example" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<!-- Center: transparent -->
<stop offset="0%" stop-color="rgb(245,245,245)" stop-opacity="0" />
<!-- Edge: solid light green -->
<stop offset="100%" stop-color="rgb(144, 238, 144)" stop-opacity="1" />
</radialGradient>
</defs>
<ellipse cx="250" cy="100" rx="95" ry="65" fill="url(#example)" /> Sorry, your browser doesn't support inline SVG.
</svg>
</body>
</html>Attribute
| Attribute | Description |
|---|---|
| cx | Gibt die x-Koordinate des Endkreises für den Verlauf an. |
| cy | Gibt die y-Koordinate des Endkreises für den Verlauf an. |
| r | Gibt den Radius des Endkreises für den Verlauf an. |
| fx | Gibt die x-Koordinate des Startkreises für den Verlauf an. |
| fy | Gibt die y-Koordinate des Startkreises für den Verlauf an. |
| gradientUnits | Gibt das Koordinatensystem für cx, cy, r, fx und fy an. Werte: objectBoundingBox (Standard) oder userSpaceOnUse. |
| gradientTransform | Fügt dem Koordinatensystem des Verlaufs eine zusätzliche Transformation hinzu. |
| href | Eine URL-Referenz auf ein anderes „radialGradient“- oder „linearGradient“-Element. |
| spreadMethod | Gibt an, wie sich der Verlauf verhält, wenn er innerhalb der Grenzen der Objekte beginnt oder endet, die den Verlauf enthalten. Werte: pad, repeat oder reflect. |
Das SVG <radialGradient>-Element unterstützt auch die Globalen Attribute und Ereignisattribute.
Practice
Welche Attribute hat das 'radialGradient'-Element in SVG?