SVG-Linear
Beschreibung von SVG-Verläufen
Ein Verlauf ist ein fließender Übergang von einer Farbe zur anderen. Es ist möglich, mehrere Farbverläufe auf dasselbe Element anzuwenden.
Es gibt zwei Hauptarten von Verläufen in SVG:
- linear
- radial
Das <linearGradient>-Element
Das <linearGradient>-Element definiert lineare Verläufe, die grafische Elemente füllen. Es sollte innerhalb eines <defs>-Tags verschachtelt sein, das die Definition bestimmter Elemente wie Verläufe enthält.
Lineare Verläufe können horizontal, vertikal oder schräg sein:
- Horizontale Verläufe - y1 und y2 sind gleich, und x1 und x2 unterscheiden sich.
- Vertikale Verläufe - x1 und x2 sind gleich, und y1 und y2 unterscheiden sich.
- Schräge Verläufe - x1 und x2 variieren, und y1 und y2 unterscheiden sich ebenfalls.
DANGER
Verwechseln Sie niemals einen SVG-Linearverlauf mit der CSS radial-gradient-Eigenschaft. CSS-Verläufe gelten für HTML-Elemente, während SVG-Verläufe für SVG-Elemente gelten.
Beispiel für das <linearGradient>-Element zum Erstellen einer Ellipse mit einem horizontalen linearen Verlauf:
Beispiel für das <linearGradient>-Element zum Erstellen einer Ellipse mit einem horizontalen linearen Verlauf
<!DOCTYPE html>
<html>
<body>
<svg height="200" width="300">
<defs>
<linearGradient id="ellipse" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(28, 135, 201);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(128, 0, 128);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="150" cy="90" rx="105" ry="65" fill="url(#ellipse)" />
</svg>
</body>
</html>Beispiel für das <linearGradient>-Element zum Erstellen einer Ellipse mit einem vertikalen linearen Verlauf:
Beispiel für das <linearGradient>-Element zum Erstellen einer Ellipse mit einem vertikalen linearen Verlauf
<!DOCTYPE html>
<html>
<body>
<svg height="300" width="400">
<defs>
<linearGradient id="ellipse" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(28, 135, 201);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(128, 0, 128);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="250" cy="100" rx="110" ry="70" fill="url(#ellipse)" />
</svg>
</body>
</html>Attribute
| Wert | Beschreibung |
|---|---|
| gradientUnits | Dieses Attribut gibt das Koordinatensystem für die Attribute x1, x2, y1, y2 an. Werte: userSpaceOnUse, objectBoundingBox. |
| gradientTransform | Dieses Attribut fügt dem Verlaufskoordinatensystem eine zusätzliche Transformation hinzu. |
| href | Dieses Attribut gibt einen Verweis auf ein anderes <linearGradient>-Element an. |
| spreadMethod | Dieses Attribut gibt an, wie sich der Verlauf verhält, wenn er innerhalb der Grenzen der Form beginnt oder endet, die den Verlauf enthält. Werte: pad, repeat, reflect. |
| x1 | Dieses Attribut gibt die x-Koordinate des Startpunkts des Vektorverlaufs an, entlang dessen der lineare Verlauf gezeichnet wird. |
| x2 | Dieses Attribut gibt die x-Koordinate des Endpunkts des Vektorverlaufs an, entlang dessen der lineare Verlauf gezeichnet wird. |
| y1 | Dieses Attribut gibt die y-Koordinate des Startpunkts des Vektorverlaufs an, entlang dessen der lineare Verlauf gezeichnet wird. |
| y2 | Dieses Attribut gibt die y-Koordinate des Endpunkts des Vektorverlaufs an, entlang dessen der lineare Verlauf gezeichnet wird. |
Das SVG <linearGradient>-Element unterstützt auch die Globalen Attribute und Ereignisattribute.
Praxis
Wofür werden die Attribute 'x1', 'y1', 'x2' und 'y2' in einem SVG-Linearverlauf in HTML verwendet?