# SVG-gradients: lineair, radiaal, lijnen, tekst en maskers [Canonical HTML page](https://gradiently.design/nl/guide/svg-gradients) SVG heeft een eigen systeem voor kleurverlopen, ouder dan CSS-gradients en in staat tot dingen die daar niet kunnen: een lijn kleuren, een woord vullen, één verloop delen over veel vormen en alles laten vervagen met een masker. ## The short version - 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. 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 ``- of ``-element in ``, geeft het ``-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. ```html ``` Een diagonaal verloop op een afgeronde rechthoek. x1, y1, x2 en y2 trekken de lijn van het verloop van linksboven naar rechtsonder. Dezelfde overgang, als CSS: `linear-gradient(135deg, #1e1b4b 0%, #7c3aed 55%, #f472b6 100%)` De SVG hierboven en dit CSS-kleurverloop komen overeen op een vierkant. Op een rechthoek rekt de SVG-versie mee met de vorm; zie gradientUnits hieronder. ## linearGradient en zijn stops `x1`, `y1`, `x2` en `y2` bepalen het begin en einde van de lijn van het verloop. Elke `` 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 | De belangrijkste attributen van linearGradient. radialGradient deelt ze allemaal, behalve de eerste rij. `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](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/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. ```html ``` Een brandpunt linksboven maakt van een platte cirkel een glanzende bol. Belichte bol, benaderd in CSS: `radial-gradient(circle at 32% 28%, #e0f2fe, #0ea5e9 35%, #082f49 80%)` CSS kan het middelpunt verplaatsen, maar middelpunt en brandpunt niet splitsen, dus dit is slechts een benadering van de SVG-bol. Vergelijk [radiale kleurverlopen in CSS](https://gradiently.design/nl/guide/css-radial-gradient). ## 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 > **De onzichtbare rechte lijn** Een horizontale `` heeft een begrenzingskader met hoogte nul, en eenheden van het begrenzingskader kunnen niet vanuit nul worden berekend, dus een standaard verloop als lijnkleur tekent niets. Zet `gradientUnits="userSpaceOnUse"` en geef echte coördinaten. ## Kleurverlopen op lijnen en tekst `stroke="url(#id)"` kleurt contouren, en zo worden iconen met verloop, voortgangsringen en grafieklijnen getekend. Op `` 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. ```html ``` Eén verloop in tekeneenheden, gedeeld door een curve en een woord. Beide lopen van cyaan naar paars over dezelfde horizontale breedte. Voor letters met verloop in HTML in plaats van SVG is [gradient-tekst in CSS](https://gradiently.design/nl/guide/css-gradient-text) 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. - pad: `linear-gradient(90deg, #0f766e 30%, #fde68a 70%)` - reflect: `repeating-linear-gradient(90deg, #fde68a -10%, #0f766e 30%, #fde68a 70%)` - repeat: `repeating-linear-gradient(90deg, #0f766e 30%, #fde68a 70%)` Van teal naar zand met de drie spreidmethoden, nagebouwd in CSS zodat je ze naast elkaar kunt vergelijken. ## 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 `` 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. ```html ``` De foto is bovenaan volledig zichtbaar en vervaagt over de onderste 60%. 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](https://gradiently.design/nl/guide/css-gradient-border). ### Vermijd - Hetzelfde `id` voor 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 - `userSpaceOnUse` voor lijnen en gedeelde verlopen - Voeg korrel toe aan grote overgangen, zie [CSS-ruistextuur](https://gradiently.design/nl/guide/css-noise-texture) ## FAQ ### Hoe voeg ik een kleurverloop toe aan een SVG? Definieer een `` of `` met ``-kinderen en een `id` in ``, 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.