# SVG-gradienter: linjära, radiella, konturer, text och masker [Canonical HTML page](https://gradiently.design/sv/guide/svg-gradients) SVG har ett eget gradientsystem, äldre än CSS-gradienter och med förmågor de saknar: färga en kontur, fylla ett ord, dela en gradient mellan många former och tona ut vad som helst med en mask. ## The short version - En SVG-gradient definieras en gång som ett linearGradient- eller radialGradient-element med stop-barn, får ett id och används genom att fill eller stroke sätts till url(#id). - Som standard använder SVG-gradienters koordinater objectBoundingBox-enheter, där 0 och 1 är kanterna på formen som målas. - gradientUnits="userSpaceOnUse" placerar gradienten i teckningens egna koordinater, vilket låter en gradient sträcka sig över flera former och fixar gradienter på helt raka linjer. - spreadMethod avgör vad som händer bortom gradientens ändar: pad håller ändfärgerna, reflect speglar blandningen och repeat startar om den. - En SVG-mask använder ljushet, så en gradient från vitt till svart i en mask tonar ut det den läggs på. En **SVG-gradient** är en färg du definierar en gång och lägger på vilken form, linje eller text som helst i en SVG. Du skriver ett ``- eller ``-element i ``, ger det ``-barn för färgerna och ett `id`, och sätter sedan en forms `fill` eller `stroke` till `url(#id)`. Till skillnad från en CSS-bakgrund kan den färga en kontur eller ett enskilt ord, och den skalas med teckningen. ```html ``` En diagonal gradient på en rektangel med rundade hörn. x1, y1, x2 och y2 drar gradientens linje från övre vänstra till nedre högra hörnet. Samma blandning, som CSS: `linear-gradient(135deg, #1e1b4b 0%, #7c3aed 55%, #f472b6 100%)` SVG-koden ovan och den här CSS-gradienten stämmer överens på en kvadrat. På en rektangel sträcks SVG-versionen med formen; se gradientUnits nedan. ## linearGradient och dess stopp `x1`, `y1`, `x2` och `y2` anger start och slut för gradientens linje. Varje `` har en `offset` från 0 till 1 (eller 0 % till 100 %), en `stop-color` och en valfri `stop-opacity`. `stop-color` är också en CSS-egenskap, så du kan tematisera gradienter från en stilmall, till exempel `stop { stop-color: var(--accent); }`. | Attribut | Standard | Vad det gör | | --- | --- | --- | | `x1 y1 x2 y2` | `0 0 1 0`, vänster till höger | Start- och slutpunkter för gradientlinjen | | `gradientUnits` | `objectBoundingBox` | Om koordinaterna är relativa till formen eller till teckningen | | `spreadMethod` | `pad` | Vad som händer bortom ändarna: `pad`, `reflect` eller `repeat` | | `gradientTransform` | ingen | Rotera, skala eller skeva gradienten, till exempel `rotate(30)` | | `href` | ingen | Ärv stopp och inställningar från en annan gradient | De viktigaste attributen hos linearGradient. radialGradient delar alla utom den första raden. `href` sparar upprepning. Definiera dina stopp en gång i en basgradient och skapa sedan varianter som pekar på den och bara ändrar riktning eller enheter. [MDN:s referens för linearGradient](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient) tar upp varje attribut. ## radialGradient: centrum, radie och fokuspunkt En radiell gradient har ett centrum (`cx`, `cy`) och en radie (`r`), som alla har standardvärdet 0,5, så den fyller formen från mitten. Den har också något CSS saknar: en separat fokuspunkt (`fx`, `fy`) där den första färgen börjar. Flyttar du fokuspunkten från mitten ser en sfär ut att vara belyst från ena sidan. ```html ``` En fokuspunkt uppåt och åt vänster förvandlar en platt cirkel till en glansig sfär. Belyst sfär, approximerad i CSS: `radial-gradient(circle at 32% 28%, #e0f2fe, #0ea5e9 35%, #082f49 80%)` CSS kan flytta centrum men inte skilja centrum från fokus, så det här är bara en approximation av SVG-klotet. Jämför [radiella gradienter i CSS](https://gradiently.design/sv/guide/css-radial-gradient). ## gradientUnits: objectBoundingBox eller userSpaceOnUse Med standardvärdet `objectBoundingBox` betyder 0 och 1 kanterna på den form som målas, så varje form får hela gradienten, utsträckt så att den passar. Med `userSpaceOnUse` anges koordinaterna i SVG:ns egna enheter, så gradienten ligger kvar och formerna visar den del de täcker. Så kan en rad stapler dela en enda sammanhängande gradient. ### objectBoundingBox - Koordinater från 0 till 1 över varje form - Varje form visar hela gradienten - Gradienten sträcks med formens proportioner - Fungerar inte på en helt horisontell eller vertikal linje ### userSpaceOnUse - Koordinater i teckningens egna enheter - Formerna visar sin del av en gradient - Vinklarna förblir sanna oavsett form - Fungerar på raka linjer och tunna konturer > **Den osynliga raka linjen** En horisontell `` har en avgränsningsruta med noll höjd, och enheter för avgränsningsrutor går inte att räkna ut från noll, så en gradientkontur med standardinställning på den ritar ingenting. Sätt `gradientUnits="userSpaceOnUse"` och ange riktiga koordinater. ## Gradienter på konturer och text `stroke="url(#id)"` målar konturer, och så ritas gradientikoner, förloppsringar och diagramlinjer. På `` färgar `fill="url(#id)"` bokstäverna, och orden förblir markerbara och sökbara. Lägg till en enfärgad reserv efter adressen, till exempel `fill="url(#dusk) #7c3aed"`, så används den om gradienten inte hittas. ```html ``` En gradient i teckningens enheter, delad av en kurva och ett ord. Båda går från cyan till lila över samma horisontella sträcka. För gradientbokstäver i HTML i stället för SVG är [gradienttext i CSS](https://gradiently.design/sv/guide/css-gradient-text) oftast enklare. Ta SVG-text när orden är en del av en illustration eller logotyp, eller ska följa en bana. ## spreadMethod: pad, reflect och repeat När gradientens linje är kortare än formen avgör `spreadMethod` vad som fyller resten. `pad` håller ändfärgerna, `reflect` speglar blandningen fram och tillbaka och `repeat` startar om den med en hård kant. Här går varje gradient från 30 % till 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%)` Blågrönt till sand med de tre spridningsmetoderna, återgivna i CSS så att du kan jämföra dem sida vid sida. ## Toning med SVG-masker En mask använder ljushet: vita ytor visar det som maskeras, svarta ytor döljer det och grått är något däremellan. En gradient från vitt till svart i en `` tonar därför mjukt ut vilken form eller bild som helst till ingenting, och så mjukar du upp kanten på ett foto eller får en diagramlinje att tona bort i början. ```html ``` Fotot syns helt upptill och tonar ut över de nedre 60 %. För HTML-element gör CSS `mask-image: linear-gradient(#000 40%, transparent)` samma jobb, med alfa i stället för ljushet. Maskningstekniken används också för genomskinliga [CSS-gradientkanter](https://gradiently.design/sv/guide/css-gradient-border). ### Undvik - Att återanvända samma gradient-`id` i två inbäddade SVG:er på en sida - Att dölja en sprite med gradientdefinitioner med `display: none` - Standardenheter på raka linjer - Mycket långa, mjuka, mörka gradienter utan struktur ### Gör så här - Unika id:n, eller en delad sprite med definitioner - Dölj sprites med noll bredd och höjd i stället - `userSpaceOnUse` för konturer och delade gradienter - Lägg till korn på stora toningar, se [CSS-brustextur](https://gradiently.design/sv/guide/css-noise-texture) ## FAQ ### Hur lägger jag till en gradient i en SVG? Definiera en `` eller `` med ``-barn och ett `id` i ``, och sätt sedan en forms `fill` eller `stroke` till `url(#id)`. ### Varför syns inte min SVG-gradientkontur på en linje? En rak horisontell eller vertikal linje har en avgränsningsruta utan storlek, så standardenheterna `objectBoundingBox` fungerar inte. Använd `gradientUnits="userSpaceOnUse"` med riktiga koordinater. ### Hur roterar jag en SVG-gradient? Ändra `x1`, `y1`, `x2` och `y2`, eller lägg till `gradientTransform="rotate(45 0.5 0.5)"` för att rotera runt mitten av avgränsningsrutan. ### Kan jag ändra SVG-gradientens färger med CSS? Ja. `stop-color` och `stop-opacity` är CSS-egenskaper, så regler som `stop { stop-color: var(--accent); }` fungerar på inbäddad SVG. ### Varför försvann min SVG-gradient när jag dolde SVG:n? Definitioner i en SVG med `display: none` kanske inte ritas. Dölj spriten med noll bredd och höjd, eller med absolut position, i stället.