> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # SVG-Radialverläufe: Glanzlicht mit fx und fy verschieben > Verschiebe das Glanzlicht eines SVG-Radialverlaufs mit fx und fy. Vergleiche kreisförmige und elliptische Verläufe und bewahre Umriss und transparente Öffnung des Emblems. Source: https://perfectvector.com/de/blog/svg-radial-gradient-focus Language: de Author: Irene Kim Published: 2026-10-02T08:00:00+09:00 Updated: 2026-10-02T08:00:00+09:00 Um das Glanzlicht eines SVG-Radialverlaufs zu verschieben, ohne die Grafik zu bewegen, setze `fx` und `fy` an seinem ``. Lass `cx`, `cy`, `r` und den Pfad unverändert. Mit `fr="0"` beginnt der Farbverlauf am Brennpunkt; der Endkreis bestimmt weiterhin seine äußere Ausdehnung. Wirkt das Glanzlicht gestreckt, prüfe vor der Konturbearbeitung `gradientUnits` und den Begrenzungsrahmen der Form. Diese Anleitung verwendet ein selbst erstelltes breites sechseckiges Emblem mit einer Öffnung. Wir vergleichen mittige und versetzte Glanzlichter und anschließend zwei gewählte Farbdefinitionen: eine objektbezogene Ellipse und einen Kreis im Benutzerkoordinatenraum. Das SVG wurde direkt als Code geschrieben. Kein Nachzeichnerdienst oder Editor hat das Beispiel erzeugt. ## Trenne den Brennpunkt vom Endkreis Ein Radialverlauf hat einen Startkreis und einen Endkreis. In dieser Vorlage reduziert `fr="0"` den Startkreis auf einen Punkt. `fx` und `fy` positionieren diesen Punkt; `cx`, `cy` und `r` definieren den Endkreis. Werden die Brennpunktkoordinaten nicht gesetzt, übernehmen sie standardmäßig die entsprechenden Mittelpunktkoordinaten. [MDNs radialGradient-Referenz](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/radialGradient) dokumentiert diese Attribute und Standardwerte. Betrachte die beiden Bearbeitungen als unterschiedliche Aufgaben: | Gewünschte Änderung | Bearbeiten | Für den Vergleich festhalten | | --------------------------------------------------------- | --------------------------------------------------------------- | ------------------------------------------- | | Hellsten Bereich nach links oben verschieben | `fx` und `fy` | Endkreiskoordinaten, Farbstopps und Pfad | | Gesamten Farbbereich verschieben | `cx` und `cy`, dabei ausdrückliche Brennpunktkoordinaten prüfen | Pfad | | Reichweite der Farbe ändern | `r` | Mittelpunkt, Brennpunkt und Pfad | | Kreisförmigen Farbbereich auf einer breiten Form behalten | Benutzerkoordinaten wählen | Alle Koordinatenwerte und den Radius prüfen | Die horizontale Brennpunktkoordinate ist [`fx`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fx), die vertikale [`fy`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fy). Änderst du beide, bewegt sich der Startpunkt diagonal. Das verändert weder die Pfadpunkte noch die Öffnung. ## Kopiere ein vollständiges SVG mit versetztem Glanzlicht Speichere dies als `emblem.svg` und öffne es im Browser. Es benötigt weder externe Bilder noch Stylesheets. ```svg ``` Ändere für den mittigen Kontrollfall nur `fx=".22" fy=".18"` zu `fx=".5" fy=".5"`. Lass die anderen Attribute und beide Konturen in `d` unverändert. Die Außenkontur reicht von `x=0` bis `160` und von `y=20` bis `100`. Die zweite Kontur definiert die Öffnung. `fill-rule="evenodd"` hält diese Öffnung ungefüllt; das Verschieben des Verlaufs füllt sie nicht. [MDNs fill-rule-Referenz](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill-rule) erklärt die Kreuzungsregel dieses zusammengesetzten Pfads. Der mittige Brennpunkt liegt in der Öffnung, deshalb ist der hellste Punkt selbst unsichtbar. Du siehst den umgebenden Farbverlauf dennoch auf dem Ring. Der versetzte Brennpunkt liegt auf dem durchgehenden Band links oben, wo der hellste Farbstopp sichtbar wird. Dieser Unterschied hilft, wenn eine Koordinatenänderung wenig zu bewirken scheint: Der Brennpunkt kann hinter einem transparenten Teil des Zeichens liegen. ## Warum das breite Emblem einen elliptischen Verlauf erhält Mit `gradientUnits="objectBoundingBox"` beschreiben die Koordinaten die Grenzen des eingefärbten Objekts. Die Grenzen unseres Emblems betragen `160 × 80`, obwohl seine SVG-Zeichenfläche `200 × 120` groß ist. Ein normalisierter Kreis wird durch diesen nicht quadratischen Rahmen auf eine Ellipse abgebildet. [MDNs gradientUnits-Referenz](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientUnits) beschreibt diese Abbildung. Hier wird `cx=".5" cy=".5"` auf `(80, 60)` abgebildet. Der Radius `.6` wird zu horizontalem und vertikalem Radius von `96` und `48`. Der versetzte Brennpunkt ergibt: ```text x = 0 + .22 × 160 = 35.2 y = 20 + .18 × 80 = 34.4 ``` Ersetze für einen kreisförmigen Endbereich in diesem nicht transformierten SVG die Koordinatenattribute des Verlaufs durch: ```svg gradientUnits="userSpaceOnUse" cx="80" cy="60" r="64" fx="35.2" fy="34.4" fr="0" spreadMethod="pad" ``` Sein mittiger Kontrollfall verwendet `fx="80" fy="60"`. Der Radius beträgt nun in beiden Richtungen `64` Benutzereinheiten. Das ist ein anderer gewählter Endbereich als die Ellipse von `96 × 48`. Wir änderten Koordinatendefinition und tatsächlichen Radius. Dieser Vergleich isoliert keinen bloßen Einheitenwechsel. Innerhalb jedes mittigen/versetzten Paars ändern sich nur die Brennpunktkoordinaten. Nutze objektbezogene Farbe, wenn der Verlauf den Proportionen jeder Form folgen soll. Verwende ausdrückliche Benutzerkoordinaten, wenn Lage und kreisförmige Ausdehnung zu den Koordinaten der Grafik gehören. Für einen Verlauf über getrennte Logopfade hinweg siehe [SVG-Verlaufseinheiten](https://perfectvector.com/de/blog/svg-gradient-units). ## Was der ursprüngliche Browservergleich zeigte Wir öffneten alle vier selbst erstellten SVGs in Chrome und zeigten jedes bei `100 × 60` und `300 × 180` CSS-Pixeln an. In der größeren Version ließ sich das Glanzlicht links oben leichter prüfen. Derselbe Versatz blieb auch in der kleineren Größe sichtbar, während die Öffnung in allen Beispielen transparent blieb. Der Quellbericht des Browsers fand einen Pfad, keine Bildelemente, identische `d`-Werte und dieselben Pfadgrenzen von `160 × 80` in allen vier Dateien. Separate Pixelauslesungen bei der Größe der Quellzeichenfläche bestätigten die geänderte Farbe: | Farbdefinition | Brennpunkt | RGBA-Probe links oben | Alpha der Öffnung | | -------------------------- | ---------- | --------------------- | ----------------- | | Objektgrenzen, Radius `.6` | Mittig | `164, 77, 84, 255` | `0` | | Objektgrenzen, Radius `.6` | Versetzt | `246, 184, 155, 255` | `0` | | Benutzerraum, Radius `64` | Mittig | `149, 67, 82, 255` | `0` | | Benutzerraum, Radius `64` | Versetzt | `248, 196, 168, 255` | `0` | Die Probe links oben liegt an der Grafikkoordinate `(35, 30)`, die Öffnungsprobe bei `(80, 60)`. Diese Beobachtungen beschreiben diese Quelle und Browsersitzung. Sie belegen weder die Ausgabe eines anderen Renderers noch das Importverhalten eines Editors. **Brennpunkt und Farbgrenzen** ![Schematische Illustration verschiedener Glanzlichtpositionen auf Emblemen mit Hilfslinien für die Farbgrenzen.](https://perfectvector.com/blog/svg-radial-gradient-focus/focus-and-bounds.webp) *Illustration: Ein Glanzlicht kann sich innerhalb einer unveränderten Kontur bewegen. Die Hilfslinien erklären die Farbgeometrie. Dies ist weder das Browserbeispiel noch ein Nachzeichnerergebnis.* ## Halte den Brennpunkt beim Abstimmen innerhalb des Kreises Beginne mit einem innenliegenden Brennpunkt und `fr="0"`. In normalisierten Koordinaten beträgt der Abstand des versetzten Punkts vom Mittelpunkt ungefähr `.425` und liegt damit unter unserem Radius `.6`. In der Benutzerraumversion beträgt sein Abstand etwa `51.6` und liegt unter `64`. Beide Varianten halten den Startpunkt innerhalb ihres Endkreises in dem Koordinatensystem, in dem dieser Kreis definiert ist. Ältere Erklärungen sagen möglicherweise, ein äußerer Brennpunkt werde immer auf den Endkreis begrenzt. SVG 2 erlaubt einen außerhalb liegenden Startkreis und definiert anderes Verhalten, darunter ungefüllte Bereiche außerhalb seines Verlaufskegels. Die [SVG-2-Spezifikation zu Radialverläufen](https://www.w3.org/TR/SVG2/pservers.html#RadialGradients) erklärt diese Änderung. Diese Vorlage verwendet innere Punkte. Wir haben die Darstellung äußerer Brennpunkte nicht browserübergreifend getestet. Behalte `spreadMethod="pad"` beim Prüfen der Position bei. Jenseits der Verlaufsausdehnung verwendet `pad` die Farbe des letzten Stopps. `repeat` und `reflect` führen Wiederholungen ein, die den Brennpunktvergleich erschweren können. [MDNs spreadMethod-Referenz](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/spreadMethod) definiert diese Möglichkeiten. Prüfe vor der Übergabe drei Dinge in der Umgebung, in der das SVG angezeigt wird: 1. Das Glanzlicht liegt bei tatsächlicher Darstellungsgröße auf dem gewünschten durchgehenden Band. 2. Die Öffnung bleibt transparent, und die Pfaddaten entsprechen weiterhin der Masterdatei. 3. Der gewählte Kreis oder die Ellipse passt zu den Proportionen des Zeichens. Verschieben sich Farben nach dem Export, prüfe Farbe und Ausgabekontext anhand von [warum SVG-Farben sich nach dem Export ändern](https://perfectvector.com/de/blog/why-svg-colors-change-after-export). Das Verschieben des Brennpunkts ist eine Positionsänderung. Gleichzeitig die Stoppfarben zu ändern erschwert daher die Auswertung des Vergleichs. ## Halte Geometriewiederherstellung und Farbgestaltung getrennt Behalte eine flache Masterdatei dieses Emblems mit demselben Pfad, einfarbiger Füllung und erhaltener Öffnung. Speichere die Verlaufsversion separat für die Webgrafik, die sie benötigt. Ein Verlauf ist eine einer Kontur zugewiesene Färbung. Diese Brennpunktkoordinaten definieren keine zusätzlichen Schnittpfade. Wenn dein ursprüngliches Logo nur als PNG oder JPG vorliegt, kann [PerfectVectors Logovektorisierer](https://perfectvector.com/de/vectorize-logo) Vektorgeometrie wiederherstellen, die du vor dem Neuaufbau dieser Farbgestaltung prüfst. Kontrolliere Außenkontur und Öffnung und lege dann die Verlaufskoordinaten in deinem SVG-Ablauf fest. Ein Rasterglanzlicht behält seine ursprünglichen Werte für `fx`, `fy` oder Radius nicht als wiederherstellbare Gestaltungsparameter. Hast du bereits saubere Vektorkonturen, bearbeite ihren Verlauf direkt. Der [Leitfaden zur Vektorisierung von Verläufen](https://perfectvector.com/de/blog/vectorize-gradients) behandelt die Raster-zu-Vektor-Entscheidung. ## Häufige Fragen **Wie verschiebe ich das Glanzlicht eines SVG-Radialverlaufs?** Setze ausdrückliche fx- und fy-Koordinaten an radialGradient. Halte beim Vergleich cx, cy, r, Farbstopps und Pfad fest. Ist fr null, positionieren diese Brennpunktkoordinaten den Startpunkt des Farbverlaufs. **Warum sieht ein Radialverlauf in meinem SVG elliptisch aus?** Bei objectBoundingBox-Einheiten wird ein normalisierter Kreis durch die Grenzen des eingefärbten Objekts abgebildet. Nicht quadratische Grenzen erzeugen eine Ellipse. In einem nicht transformierten SVG können ausdrückliche userSpaceOnUse-Koordinaten einen kreisförmigen Bereich in Grafikeinheiten definieren. **Füllt das Verschieben des Brennpunkts die Öffnung eines Logos?** Nein. Der zusammengesetzte Pfad und seine Füllregel bestimmen die Öffnung. Dieses Beispiel verwendet evenodd und behält in jedem Beispiel denselben Pfad. Seine Öffnung bleibt beim Verschieben des Brennpunkts transparent. **Kann Vektorisierung die ursprünglichen Brennpunktkoordinaten des Verlaufs wiederherstellen?** Ein Rasterbild bewahrt die ursprünglichen SVG-Verlaufsparameter nicht. Stelle bei Bedarf die Konturen wieder her und prüfe sie. Baue dann die Farbgestaltung neu auf und kontrolliere das Glanzlicht in der vorgesehenen Darstellungsumgebung. ## Quellen 1. [MDN radialGradient](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/radialGradient) – Start-/Endkreisattribute und ihre Standardwerte. 2. [MDN fx](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fx) – Bedeutung der horizontalen Brennpunktkoordinate. 3. [MDN fy](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fy) – Bedeutung der vertikalen Brennpunktkoordinate. 4. [MDN fill-rule](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill-rule) – Gerade-Ungerade-Füllverhalten für die Öffnung. 5. [MDN gradientUnits](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientUnits) – Objektgrenzen, Benutzerraum und elliptische Abbildung. 6. [SVG-2-Radialverläufe](https://www.w3.org/TR/SVG2/pservers.html#RadialGradients) – Startkreisgeometrie und Spezifikationsänderung für äußere Brennpunkte. 7. [MDN spreadMethod](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/spreadMethod) – Verhalten von pad, repeat und reflect. ## Explore - [Read the HTML article](https://perfectvector.com/de/blog/svg-radial-gradient-focus) - [SVG-Verlauf entlang eines Pfads: Farbe in der Kurve prüfen](https://perfectvector.com/de/blog/svg-gradient-curved-stroke.md) - [SVG feColorMatrix: Umfärben ohne Füllwerte zu ändern](https://perfectvector.com/de/blog/svg-fecolormatrix.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)