De korte versie
- Een SVG-gradient definieer je één keer als linearGradient- of radialGradient-element met stop-kinderen, je geeft het een id en past het toe door fill of stroke op url(#id) te zetten.
- Standaard gebruiken de coördinaten van een SVG-gradient objectBoundingBox-eenheden, waarbij 0 en 1 de randen zijn van de vorm die wordt ingekleurd.
- gradientUnits="userSpaceOnUse" plaatst het verloop in de eigen coördinaten van de tekening, waardoor één verloop meerdere vormen kan overspannen en verlopen op perfect rechte lijnen wel werken.
- spreadMethod bepaalt wat er voorbij de uiteinden van het verloop gebeurt: pad houdt de eindkleuren vast, reflect spiegelt de overgang en repeat begint opnieuw.
- Een SVG-masker werkt met helderheid, dus een verloop van wit naar zwart in een masker laat alles vervagen waarop het wordt toegepast.
Op deze pagina
Een SVG gradient is een verf die je één keer definieert en toepast op elke vorm, lijn of tekst in een SVG. Je schrijft een <linearGradient>- of <radialGradient>-element in <defs>, geeft het <stop>-kinderen voor de kleuren en een id, en zet daarna de fill of stroke van een vorm op url(#id). Anders dan een CSS-achtergrond kan het een lijn of één enkel woord kleuren, en het schaalt mee met de tekening.
<svg viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="dusk" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#1e1b4b" />
<stop offset="0.55" stop-color="#7c3aed" />
<stop offset="1" stop-color="#f472b6" />
</linearGradient>
</defs>
<rect width="200" height="120" rx="16" fill="url(#dusk)" />
</svg>linear-gradient(135deg, #1e1b4b 0%, #7c3aed 55%, #f472b6 100%)linearGradient en zijn stops
x1, y1, x2 en y2 bepalen het begin en einde van de lijn van het verloop. Elke <stop> krijgt een offset van 0 tot 1 (of 0% tot 100%), een stop-color en een optionele stop-opacity. stop-color is ook een CSS-eigenschap, dus je kunt verlopen een thema geven vanuit een stylesheet, bijvoorbeeld stop { stop-color: var(--accent); }.
| Attribuut | Standaard | Wat het doet |
|---|---|---|
x1 y1 x2 y2 | 0 0 1 0, van links naar rechts | Begin- en eindpunt van de lijn van het verloop |
gradientUnits | objectBoundingBox | Of coördinaten relatief zijn aan de vorm of aan de tekening |
spreadMethod | pad | Wat er voorbij de uiteinden gebeurt: pad, reflect of repeat |
gradientTransform | geen | Het verloop draaien, schalen of scheeftrekken, bijv. rotate(30) |
href | geen | Stops en instellingen overnemen van een ander verloop |
href bespaart herhaling. Definieer je stops één keer in een basisverloop en maak dan varianten die ernaar verwijzen en alleen de richting of de eenheden veranderen. De MDN-referentie voor linearGradient behandelt elk attribuut.
radialGradient: middelpunt, straal en brandpunt
Een radiaal verloop krijgt een middelpunt (cx, cy) en een straal (r), allemaal standaard 0.5, zodat het de vorm vanuit het midden vult. Het heeft ook iets wat CSS mist: een apart brandpunt (fx, fy) waar de eerste kleur begint. Verschuif je het brandpunt uit het midden, dan lijkt een bol van één kant belicht.
<radialGradient id="orb" cx="0.5" cy="0.5" r="0.5" fx="0.32" fy="0.28">
<stop offset="0" stop-color="#e0f2fe" />
<stop offset="0.45" stop-color="#0ea5e9" />
<stop offset="1" stop-color="#082f49" />
</radialGradient>
<circle cx="60" cy="60" r="50" fill="url(#orb)" />radial-gradient(circle at 32% 28%, #e0f2fe, #0ea5e9 35%, #082f49 80%)gradientUnits: objectBoundingBox of userSpaceOnUse
Met de standaard objectBoundingBox betekenen 0 en 1 de randen van de vorm die wordt ingekleurd, dus elke vorm krijgt het hele verloop, passend uitgerekt. Met userSpaceOnUse staan de coördinaten in de eigen eenheden van de SVG, dus het verloop blijft op zijn plek en vormen tonen het deel dat ze bedekken. Zo kan een rij staven één doorlopend verloop delen.
objectBoundingBox
- Coördinaten van 0 tot 1 over elke vorm
- Elke vorm toont het volledige verloop
- Het verloop rekt mee met de verhoudingen van de vorm
- Werkt niet op een perfect horizontale of verticale lijn
userSpaceOnUse
- Coördinaten in de eigen eenheden van de tekening
- Vormen tonen hun deel van één verloop
- Hoeken blijven kloppen, welke vorm het ook is
- Werkt op rechte lijnen en dunne lijnen
Kleurverlopen op lijnen en tekst
stroke="url(#id)" kleurt contouren, en zo worden iconen met verloop, voortgangsringen en grafieklijnen getekend. Op <text> kleurt fill="url(#id)" de letters, en de woorden blijven selecteerbaar en doorzoekbaar. Zet een egale kleur achter de URL, zoals fill="url(#dusk) #7c3aed", en die wordt gebruikt als het verloop niet wordt gevonden.
<svg viewBox="0 0 320 120" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="line" gradientUnits="userSpaceOnUse" x1="20" y1="0" x2="300" y2="0">
<stop offset="0" stop-color="#22d3ee" />
<stop offset="1" stop-color="#a855f7" />
</linearGradient>
</defs>
<path d="M20 90 C 90 20, 160 110, 300 30" fill="none" stroke="url(#line)" stroke-width="6" stroke-linecap="round" />
<text x="20" y="115" font-size="20" font-weight="700" fill="url(#line) #7c3aed">Growth</text>
</svg>Voor letters met verloop in HTML in plaats van SVG is gradient-tekst in CSS meestal eenvoudiger. Kies voor SVG-tekst als de woorden deel zijn van een illustratie of logo, of een pad moeten volgen.
spreadMethod: pad, reflect en repeat
Als de lijn van het verloop korter is dan de vorm, bepaalt spreadMethod wat de rest vult. pad houdt de eindkleuren vast, reflect spiegelt de overgang heen en weer, en repeat begint opnieuw met een harde rand. Hier loopt elk verloop van 30% tot 70% van de breedte.
Vervagen met SVG-maskers
Een masker werkt met helderheid: witte delen tonen wat wordt gemaskeerd, zwarte delen verbergen het, en grijstinten zitten ertussenin. Een verloop van wit naar zwart in een <mask> laat dus elke vorm of afbeelding vloeiend tot niets vervagen. Zo verzacht je de rand van een foto of laat je een grafieklijn aan het begin uitfaden.
<defs>
<linearGradient id="fade" x1="0" y1="0" x2="0" y2="1">
<stop offset="0.4" stop-color="#fff" />
<stop offset="1" stop-color="#000" />
</linearGradient>
<mask id="soft-bottom">
<rect width="100%" height="100%" fill="url(#fade)" />
</mask>
</defs>
<image href="photo.jpg" width="100%" height="100%" mask="url(#soft-bottom)" />Voor HTML-elementen doet CSS mask-image: linear-gradient(#000 40%, transparent) hetzelfde, met alfa in plaats van helderheid. De maskertechniek zit ook achter transparante CSS-randen met kleurverloop.
Vermijd
- Hetzelfde
idvoor een verloop hergebruiken in twee inline SVG’s op één pagina - Een sprite met verloopdefinities verbergen met
display: none - Standaardeenheden op rechte lijnen
- Heel lange, gladde, donkere verlopen zonder textuur
Doe
- Unieke id’s, of één gedeelde sprite met definities
- Verberg sprites in plaats daarvan met breedte en hoogte nul
userSpaceOnUsevoor lijnen en gedeelde verlopen- Voeg korrel toe aan grote overgangen, zie CSS-ruistextuur
Vragen die mensen stellen
Hoe voeg ik een kleurverloop toe aan een SVG?
Definieer een <linearGradient> of <radialGradient> met <stop>-kinderen en een id in <defs>, en zet daarna de fill of stroke van een vorm op url(#id).
Waarom is mijn SVG-verloop niet zichtbaar op een lijn?
Een rechte horizontale of verticale lijn heeft een begrenzingskader met grootte nul, dus de standaardeenheden objectBoundingBox werken niet. Gebruik gradientUnits="userSpaceOnUse" met echte coördinaten.
Hoe draai ik een SVG-gradient?
Verander x1, y1, x2 en y2, of voeg gradientTransform="rotate(45 0.5 0.5)" toe om rond het midden van het begrenzingskader te draaien.
Kan ik de kleuren van een SVG-gradient met CSS veranderen?
Ja. stop-color en stop-opacity zijn CSS-eigenschappen, dus regels zoals stop { stop-color: var(--accent); } werken op inline SVG.
Waarom verdween mijn SVG-gradient toen ik de SVG verborg?
Definities in een SVG met display: none worden mogelijk niet getekend. Verberg de sprite in plaats daarvan met breedte en hoogte nul, of met absolute positionering.
Geschreven door Gradiently
Het team achter Gradiently, een ontwerptool rond Marks: levende kleurverlopen die alles wat je ontwerpt op jou laten lijken.
Bekijk ons profiel
