Kortversjonen
- 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å.
På denne siden
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 <linearGradient>- eller <radialGradient>-element inne i <defs>, gir det <stop>-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.
<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 og stoppene
x1, y1, x2 og y2 setter starten og slutten på gradientlinjen. Hver <stop> 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 |
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 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.
<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 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
Gradienter på streker og tekst
stroke="url(#id)" maler omriss, og det er slik gradientikoner, fremdriftsringer og diagramlinjer tegnes. På <text> 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.
<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>For gradientbokstaver i HTML i stedet for SVG er gradienttekst i CSS 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.
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 <mask> 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.
<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)" />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.
Unngå
- Å bruke samme gradient-
idi 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
userSpaceOnUsefor streker og delte gradienter- Legg korn på store uttoninger, se støytekstur i CSS
Spørsmål folk stiller
Hvordan legger jeg til en gradient i en SVG?
Definer en <linearGradient> eller <radialGradient> med <stop>-barn og en id inne i <defs>, 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.
Skrevet av Gradiently
Teamet bak Gradiently, et designverktøy bygget rundt Marks: levende gradienter som gjør at alt du designer ser ut som ditt.
Se profilen vår
