> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.
# SVG-Verlauf entlang eines Pfads: Farbe in der Kurve prüfen
> Vergleiche einen SVG-Koordinatenverlauf mit gezielten Farbbändern auf einem gebogenen Band. Prüfe die Quelle und zwei Größen und entscheide über den Geometrieaufwand.
Source: https://perfectvector.com/de/blog/svg-gradient-curved-stroke
Language: de
Author: Irene Kim
Published: 2026-10-05T08:00:00+09:00
Updated: 2026-10-05T08:00:00+09:00
Ein gewöhnlicher SVG-`linearGradient` misst keinen Fortschritt entlang eines gekrümmten Pfads. Er färbt anhand eines Verlaufsvektors in einem Koordinatensystem. Kehrt ein Band um, können zwei Punkte an derselben Position entlang dieses Vektors dieselbe Farbe erhalten, obwohl sie auf dem Band weit auseinanderliegen.
Für einen statischen Entwurf, dessen Farbe um eine Kurve fortschreiten soll, kannst du getrennte farbige Abschnitte erstellen. Das gibt dir Kontrolle über die Reihenfolge, fügt aber Geometrie und sichtbare Farbgrenzen hinzu. Unser selbst erstelltes Beispiel vergleicht einen horizontalen Verlauf mit acht gezielt angelegten Bändern auf derselben Route. Beide Dateien enthalten Pfade und kein eingebettetes Bild.
## Prüfe, wo sich die Farbe wiederholt
Die [SVG2-Spezifikation zu Farbquellen](https://www.w3.org/TR/SVG2/pservers.html) definiert lineare Verläufe über einen Vektor und dessen Farbstopps. Radialverläufe beschreibt sie über ihre eigene Kreisgeometrie. Keine der Definitionen macht aus einem beliebigen Pfad eine Farbachse entlang der Pfadlänge.
Unser Band beginnt links oben, läuft nach rechts, biegt um einen Halbkreis und kehrt nach links unten zurück. Ein horizontaler Verlauf macht beide linken Enden orange und die rechte Kurve violett. Das ist ein gültiger Koordinatenverlauf. Er beantwortet nur eine andere Gestaltungsfrage als „die Farbe vom Anfang dieser Route bis zu ihrem Ende ändern“.
Das [MDN-Tutorial zu Verläufen](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Gradients) erklärt das Modell aus Endpunkten und Stopps. Weitere Stopps verändern diese koordinatenbasierte Farbfolge. Sie lassen die Farbe nicht der Kurve folgen.
**Koordinatenfarbe und angelegte Bänder**
*Illustration: Ein Koordinatenverlauf kann auf einer zurücklaufenden Route Farbe wiederholen, während getrennte Bänder eine andere Folge vom Anfang zum Ende zuweisen. Die folgenden tatsächlichen Quellzählungen und Browserproben stammen aus unabhängig erstellten SVG-Dateien.*
## Behalte einen gewöhnlichen Verlauf als Kontrolle
Speichere diese vollständige Datei als `coordinate.svg`. Der Pfad verwendet eine 24 Einheiten breite Kontur innerhalb einer `200×160` großen viewBox. Seine geraden Teile und der rechte Halbkreis bilden eine bearbeitbare Mittellinie.
```svg
```
Wir verwenden `gradientUnits="userSpaceOnUse"`, um die Verlaufsendpunkte ausdrücklich im Quellkoordinatensystem festzulegen. Ein Wechsel zu Begrenzungsrahmenkoordinaten würde ändern, wie diese Endpunkte angegeben werden. Er würde keine Färbung nach Pfadlänge einführen. Siehe die [gradientUnits-Referenz](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientUnits) und unseren [Leitfaden zu Verlaufskoordinaten](https://perfectvector.com/de/blog/svg-gradient-units).
Die vollständige Route ist ein `path`-Element. Behalte diese einfache Version als Geometrie-Masterdatei, auch wenn du eine aufwendigere Farbgestaltung ausliefern möchtest.
## Erstelle eine abgestufte Folge um die Kurve
Speichere Folgendes als `bands.svg`. Es teilt den oberen geraden Abschnitt in zwei Teile, den Halbkreis in vier Bögen und den zurücklaufenden geraden Abschnitt in zwei Teile. Die Farben werden in Routenreihenfolge zugewiesen, von Orange am oberen Anfang bis Violett am unteren Ende.
```svg
```
Das sind acht manuell gewählte Bänder mit ungleichen Segmentlängen. Sie berechnen keine gleichmäßigen Farbschritte pro Einheit Pfadlänge und erzeugen keine kontinuierliche Schattierung. Die gerundeten Dezimalendpunkte der Bögen nähern die ursprüngliche Route an. Dieses Beispiel behauptet keinen pixelidentischen Umriss.
Die [`path`-Referenz](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/path) dokumentiert das Element und seine Pfaddaten. Jeder Abschnitt bleibt hier eine Mittellinie mit Kontur statt einer in einen geschlossenen Füllpfad umgewandelten Form. Benötigt ein Ziel geschlossene Formen, bereite diese Geometrie separat vor und prüfe sie, statt die Konturstücke als Schnittkonturen zu behandeln.
Wir verwenden [`stroke-linecap="butt"`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/stroke-linecap), damit benachbarte Teile nicht über ihre Endpunkte hinausragen. Runde Abschlüsse an jedem inneren Abschnitt würden benachbarte Farben überdecken. Auch die Übergänge von Geraden zu Bögen brauchen passende Richtungen. Unser [Leitfaden zu glatten Übergängen](https://perfectvector.com/de/blog/svg-bezier-smooth-joins) behandelt die geometrische Stetigkeit separat.
## Vergleiche zwei Größen und zwei Positionen
Wir renderten beide ursprünglichen Dateien in Chrome bei `200×160` und `400×320` CSS-Pixeln. Der Browser dekodierte jedes SVG und zeichnete es auf ein Canvas, dessen Pufferabmessungen den Testabmessungen entsprachen. Das Geräte-Pixelverhältnis des Browsers betrug 2. Diese aufgezeichneten Proben stammen aus dem Canvas-Puffer, nicht vom Zählen der Gerätepixel eines Screenshots.
An den Quellkoordinaten `(60,30)` und `(60,130)` liegen die Punkte auf verschiedenen geraden Abschnitten der Route. Sie haben dieselbe horizontale Koordinate. Deshalb gibt der horizontale Verlauf ihnen dieselbe abgetastete Farbe.
| Datei | Obere Probe bei x=60 | Untere Probe bei x=60 | Pfade | Eingebettete Bilder |
| ---------------------------- | -------------------- | --------------------- | ----- | ------------------- |
| Koordinatenverlauf | RGB 202,100,71 | RGB 202,100,71 | 1 | 0 |
| Angelegte Farbbänder | RGB 227,107,44 | RGB 112,75,170 | 8 | 0 |
| Flache Geometrie-Masterdatei | RGB 184,94,57 | RGB 184,94,57 | 1 | 0 |
Die Probenpaare waren in beiden getesteten Größen gleich, mit Alpha 255 innerhalb der bemalten Bereiche. Der offene Bereich bei Quellkoordinate `(100,80)` hatte in allen sechs Fällen Alpha null. Das prüft diese selbst erstellten Dateien in diesem Browser. Es zertifiziert nicht jeden Renderer oder alle Grenzpixel.
Die Banddarstellung behält in beiden Größen sichtbare diskrete Farbwechsel. Prüfe die Übergänge bei Ausgabegröße, besonders nach Export oder Einbettung. Getrennte Teile können durch Kantenglättung, Rundung oder spätere Bearbeitung Nähte zeigen. Mehr Abschnitte können jeden Farbsprung verkleinern, erzeugen aber auch mehr Pfade und mehr zu pflegende Grenzen.
## Wähle die Gestaltung, bevor du die Grafik umwandelst
| Gestaltungsbedarf | Nützlicher Ausgangspunkt | Zu prüfender Aufwand |
| ------------------------------------------- | -------------------------------------------------------- | ----------------------------------------------------------------------- |
| Farbe folgt einer Seitenrichtung | Ein Koordinatenverlauf | Endpunktpositionen und Quellgrenzen |
| Statische Folge um diese Route | Gezielt gefärbte Abschnitte | Abschnittsfarben, tangentiale Übergänge und Nähte |
| Glatte Folge entlang einer beliebigen Kurve | Separat gestaltete Annäherung oder andere Ausgabemethode | Abtastung, Überschneidungen, bearbeitbare Geometrie und Zieldarstellung |
Das Drehen eines linearen Verlaufs ändert seine Richtung. Seine Wiederholung ändert, wie sich die Farben fortsetzen. Keine der beiden Operationen lässt ihn fortlaufend mit dieser zurücklaufenden Mittellinie abbiegen. Ein Radialverlauf kann zu einer kreisförmigen Komposition passen. Das ist aber seine eigene Farbgeometrie und keine allgemeine Lösung nach Routenlänge.
Wenn du die Kurve später anpasst, überarbeite die Abschnitte gemeinsam. Behalte eine flache Masterdatei zum Vergleich mit der vorgesehenen Route und bewahre die Farbgestaltungskopie separat auf. Unser [Leitfaden zu relativen Pfaden](https://perfectvector.com/de/blog/svg-relative-path-commands) kann beim Lesen oder Verschieben der zugrunde liegenden Pfadbefehle helfen.
Ist deine Ausgangsgrafik ein PNG oder JPG und brauchst du bearbeitbare Konturen, [konvertiere die Quelle mit PerfectVector](https://perfectvector.com/de/image-to-vector). Prüfe wiederhergestellte Form und offene Bereiche und behalte eine saubere SVG-Masterdatei. Wähle oder rekonstruiere die Farbgestaltung erst nach dieser Geometrieprüfung. Vektorisierung garantiert weder die exakte Wiederherstellung kontinuierlicher Schattierung noch erfindet sie eine native Funktion für Verläufe entlang von Pfaden. Ein vorhandenes sauberes SVG benötigt direktes Bearbeiten von Farbe und Geometrie. Der [Leitfaden zur Bildvektorisierung](https://perfectvector.com/de/blog/what-is-image-vectorization) erklärt, wann Rasterkonvertierung hilft.
## Häufige Fragen
**Kann ich einen linearGradient jedem gekrümmten Konturstrich folgen lassen?**
Die gewöhnliche linearGradient-Definition bietet keine Einstellung nach Pfadlänge. Ihr Koordinatenvektor steuert die Färbung. Das abgestufte Beispiel weist getrennten Routenabschnitten getrennte Farben zu.
**Beheben mehr Verlaufsstopps die wiederholten Farben beim Rücklauf?**
Mehr Stopps können Farbübergänge entlang des Verlaufsvektors verfeinern. Punkte an derselben Position entlang dieses Vektors erhalten weiterhin dieselbe koordinatenbasierte Farbe.
**Enthält die Banddatei ein Rasterbild?**
Nein. Unser selbst erstelltes Beispiel enthält acht path-Elemente und kein image-Element. Es enthält außerdem sichtbare Farbstufen statt eines kontinuierlichen Verlaufs nach Pfadlänge.
**Sollte ich jeden Verlauf durch separate Pfade ersetzen?**
Verwende den einfacheren Koordinatenverlauf, wenn er zum Entwurf passt. Getrennte Abschnitte sind nützlich, wenn ihre Farbfolge und Bearbeitungskosten akzeptabel sind. Prüfe Nähte und Zieldarstellung vor der Übergabe.
## Quellen
1. [W3C – SVG2-Farbquellen](https://www.w3.org/TR/SVG2/pservers.html) – Verlaufsvektoren, Stopps und koordinatenbasierte Färbung.
2. [MDN – Verläufe in SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Gradients) – Aufbau linearer und radialer Verläufe.
3. [MDN – gradientUnits](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientUnits) – Benutzerraum- und Begrenzungsrahmenkoordinatensysteme.
4. [MDN – path](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/path) – Prüfbare Pfadelemente und Pfaddaten.
5. [MDN – stroke-linecap](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/stroke-linecap) – Verhalten flacher und runder Konturenden.
## Explore
- [Read the HTML article](https://perfectvector.com/de/blog/svg-gradient-curved-stroke)
- [SVG-Pfadecken durch Ändern der gefüllten Form abrunden](https://perfectvector.com/de/blog/round-svg-path-corners.md)
- [SVG-Textumbruch: Gemessene Zeilen mit tspan erstellen](https://perfectvector.com/de/blog/svg-text-wrap-tspan.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)