# SVG-gradienter: lineære, radiale, streker, tekst og masker [Canonical HTML page](https://gradiently.design/nb/guide/svg-gradients) SVG har sitt eget gradientsystem, eldre enn CSS-gradienter og i stand til ting de ikke kan: fargelegge en strek, fylle et ord, dele én gradient mellom mange former og tone ut hva som helst med en maske. ## The short version - En SVG-gradient defineres én gang som et linearGradient- eller radialGradient-element med stop-barn, får en id og brukes ved å sette fill eller stroke til url(#id). - Som standard bruker koordinatene i SVG-gradienter objectBoundingBox-enheter, der 0 og 1 er kantene på formen som males. - gradientUnits="userSpaceOnUse" plasserer gradienten i tegningens egne koordinater, noe som lar én gradient spenne over flere former og fikser gradienter på helt rette linjer. - spreadMethod avgjør hva som skjer utenfor endene av gradienten: pad holder endefargene, reflect speiler overgangen og repeat starter den på nytt. - En SVG-maske bruker lysstyrke, så en gradient fra hvit til svart inne i en maske toner ut det den brukes på. En **SVG-gradient** er en maling du definerer én gang og bruker på en hvilken som helst form, linje eller tekst i en SVG. Du skriver et ``- eller ``-element inne i ``, gir det ``-barn for fargene og en `id`, og setter så `fill` eller `stroke` på en form til `url(#id)`. I motsetning til en CSS-bakgrunn kan den fargelegge en strek eller et enkelt ord, og den skalerer med tegningen. ```html ``` En diagonal gradient på et avrundet rektangel. x1, y1, x2 og y2 tegner gradientlinjen fra øverst til venstre til nederst til høyre. Den samme overgangen, som CSS: `linear-gradient(135deg, #1e1b4b 0%, #7c3aed 55%, #f472b6 100%)` SVG-en over og denne CSS-gradienten stemmer overens på et kvadrat. På et rektangel strekker SVG-versjonen seg med formen. Se gradientUnits under. ## linearGradient og stoppene `x1`, `y1`, `x2` og `y2` setter starten og slutten på gradientlinjen. Hver `` tar en `offset` fra 0 til 1 (eller 0 % til 100 %), en `stop-color` og en valgfri `stop-opacity`. `stop-color` er også en CSS-egenskap, så du kan gi gradienter tema fra et stilark, for eksempel `stop { stop-color: var(--accent); }`. | Attributt | Standard | Hva det gjør | | --- | --- | --- | | `x1 y1 x2 y2` | `0 0 1 0`, venstre til høyre | Start- og sluttpunkt for gradientlinjen | | `gradientUnits` | `objectBoundingBox` | Om koordinatene er relative til formen eller til tegningen | | `spreadMethod` | `pad` | Hva som skjer utenfor endene: `pad`, `reflect` eller `repeat` | | `gradientTransform` | ingen | Roter, skaler eller skjev gradienten, f.eks. `rotate(30)` | | `href` | ingen | Arv stopp og innstillinger fra en annen gradient | Hovedattributtene til linearGradient. radialGradient deler alle unntatt den første raden. `href` sparer gjentakelse. Definer stoppene én gang i en basisgradient, og lag så varianter som peker på den og bare endrer retningen eller enhetene. [MDN-referansen for linearGradient](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient) dekker hvert attributt. ## radialGradient: sentrum, radius og fokuspunkt En radial gradient tar et sentrum (`cx`, `cy`) og en radius (`r`), alle med standardverdi 0,5, så den fyller formen fra midten. Den har også noe CSS mangler: et eget fokuspunkt (`fx`, `fy`) der den første fargen starter. Når du flytter fokuspunktet bort fra sentrum, ser en kule ut som den er belyst fra én side. ```html ``` Et fokuspunkt opp og til venstre gjør en flat sirkel til en blank kule. Belyst kule, tilnærmet i CSS: `radial-gradient(circle at 32% 28%, #e0f2fe, #0ea5e9 35%, #082f49 80%)` CSS kan flytte sentrum, men ikke skille sentrum og fokus, så dette er bare en tilnærming til SVG-kulen. Sammenlign med [radiale gradienter i CSS](https://gradiently.design/nb/guide/css-radial-gradient). ## gradientUnits: objectBoundingBox eller userSpaceOnUse Med standarden `objectBoundingBox` betyr 0 og 1 kantene på den formen som males, så hver form får hele gradienten, strukket for å passe. Med `userSpaceOnUse` er koordinatene i SVG-ens egne enheter, så gradienten ligger i ro, og formene avdekker den delen av den de dekker. Det er slik en rad med søyler kan dele én sammenhengende gradient. ### objectBoundingBox - Koordinater fra 0 til 1 over hver form - Hver form viser hele gradienten - Gradienten strekker seg med formens proporsjoner - Svikter på en helt vannrett eller loddrett linje ### userSpaceOnUse - Koordinater i tegningens egne enheter - Formene avdekker sin bit av én gradient - Vinklene holder seg sanne uansett form - Fungerer på rette linjer og tynne streker > **Den usynlige rette linjen** En vannrett `` har en avgrensningsboks med null høyde, og enheter basert på avgrensningsboksen kan ikke beregnes fra null, så en standard gradientstrek på den tegner ingenting. Sett `gradientUnits="userSpaceOnUse"` og oppgi virkelige koordinater. ## Gradienter på streker og tekst `stroke="url(#id)"` maler omriss, og det er slik gradientikoner, fremdriftsringer og diagramlinjer tegnes. På `` fargelegger `fill="url(#id)"` bokstavene, og ordene kan fortsatt markeres og søkes i. Legg til en flat farge etter URL-en, som `fill="url(#dusk) #7c3aed"`, så brukes den hvis gradienten ikke blir funnet. ```html ``` Én gradient i tegningens enheter, delt av en kurve og et ord. Begge går fra cyan til lilla over det samme vannrette spennet. For gradientbokstaver i HTML i stedet for SVG er [gradienttekst i CSS](https://gradiently.design/nb/guide/css-gradient-text) som regel enklere. Grip til SVG-tekst når ordene er en del av en illustrasjon eller logo, eller må følge en bane. ## spreadMethod: pad, reflect og repeat Når gradientlinjen er kortere enn formen, avgjør `spreadMethod` hva som fyller resten. `pad` holder endefargene, `reflect` speiler overgangen frem og tilbake, og `repeat` starter den på nytt med en hard kant. Her går hver gradient fra 30 % til 70 % av bredden. - 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%)` Turkis til sand med de tre spredningsmetodene, gjenskapt i CSS så du kan sammenligne dem side om side. ## Uttoning med SVG-masker En maske bruker lysstyrke: hvite områder viser det som er maskert, svarte områder skjuler det, og gråtoner ligger imellom. En gradient fra hvit til svart inne i en `` toner derfor enhver form eller ethvert bilde jevnt ut til ingenting, og det er slik du mykner kanten på et bilde eller lar en diagramlinje tone ut i starten. ```html ``` Bildet er fullt synlig øverst og toner ut over de nederste 60 %. For HTML-elementer gjør CSS-regelen `mask-image: linear-gradient(#000 40%, transparent)` samme jobb, med alfa i stedet for lysstyrke. Masketeknikken ligger også bak gjennomsiktige [gradientkanter i CSS](https://gradiently.design/nb/guide/css-gradient-border). ### Unngå - Å bruke samme gradient-`id` i to innebygde SVG-er på én side - Å skjule en sprite med gradientdefinisjoner med `display: none` - Standardenheter på rette linjer - Svært lange, jevne, mørke gradienter uten tekstur ### Gjør - Unike id-er, eller én delt sprite med definisjoner - Skjul sprites med null bredde og høyde i stedet - `userSpaceOnUse` for streker og delte gradienter - Legg korn på store uttoninger, se [støytekstur i CSS](https://gradiently.design/nb/guide/css-noise-texture) ## FAQ ### Hvordan legger jeg til en gradient i en SVG? Definer en `` eller `` med ``-barn og en `id` inne i ``, og sett så `fill` eller `stroke` på en form til `url(#id)`. ### Hvorfor vises ikke gradientstreken min på en linje i SVG? En rett vannrett eller loddrett linje har en avgrensningsboks med størrelse null, så standardenhetene `objectBoundingBox` svikter. Bruk `gradientUnits="userSpaceOnUse"` med virkelige koordinater. ### Hvordan roterer jeg en SVG-gradient? Endre `x1`, `y1`, `x2` og `y2`, eller legg til `gradientTransform="rotate(45 0.5 0.5)"` for å rotere rundt midten av avgrensningsboksen. ### Kan jeg endre fargene i en SVG-gradient med CSS? Ja. `stop-color` og `stop-opacity` er CSS-egenskaper, så regler som `stop { stop-color: var(--accent); }` fungerer på innebygd SVG. ### Hvorfor forsvant SVG-gradienten min da jeg skjulte SVG-en? Definisjoner inne i en SVG med `display: none` blir kanskje ikke tegnet. Skjul spriten med null bredde og høyde, eller med absolutt posisjonering, i stedet.