SVG lineær baggrund

SVG glidende farver skal defineres inde i <defs>-tagget.

SVG glidende farve

En glidende farve er en glat overgang fra en farve til en anden. Derudover kan flere farveovergange anvendes på samme element.

Der er to hovedtyper af glidende farver i SVG:

  • Lineær glidende farve
  • Radiell glidende farve

Lineær glidende farve

<linearGradient> bruges til at definere lineære glidende farver i SVG.

<linearGradient>-tagget skal indlejres inde i <defs>-tagget. <defs>-tagget er en forkortelse for definitions og bruges til at definere specielle elementer som glidende farver.

Lineære glidende farver kan defineres som vandrette, lodrette eller vinkelformede glidende farver:

  • Når y1 og y2 er ens, mens x1 og x2 er forskellige, kan man oprette en vandret glidende farve
  • Når x1 og x2 er ens, mens y1 og y2 er forskellige, kan man oprette en lodret glidende farve
  • Når x1 og x2 er forskellige, og y1 og y2 er forskellige, kan man oprette en vinkelformet glidende farve

Kopier nedenstående kode til en tekstfil, gem filen som "linear1.svg" og placer filen i din webmappe:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>

Kodeforklaring:

  • id-attributten på <linearGradient>-tagget kan definere et unikt navn til glidende farve
  • fill:url(#orange_red) attributten knytter ellipse-elementet til denne glidende farve
  • x1, x2, y1, y2-attributterne på <linearGradient>-tagget kan definere start- og slutpositionen for glidende farve
  • Farveområdet for glidende farve kan bestå af to eller flere farver. Hver farve defineres ved en <stop>-tag. offset-attributten bruges til at definere start- og slutpositionen for glidende farve.

Se eksempel (vandret glidende farveovergang)

En anden eksempel:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>

Se eksempel (vandret baggrund)