SVG lineær farveovergang

SVG farveovergang

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

SVG har to hovedtyper af farveovergange:

• Linær farveovergang
• Strålefarveovergang

SVG linær farveovergang - <linearGradient>

<linearGradient> Elementet bruges til at definere en linær farveovergang.

<linearGradient> Element skal være indlejret i <defs> Inden i mærket.<defs> Element er en forkortelse for definitioner, der indeholder definitioner af specielle elementer (f.eks. filtre).

En linær farveovergang kan defineres som en horisontal, lodret eller vinkelfarveovergang:

• Opret en horisontal farveovergang, når y1 og y2 er ens og x1 og x2 er ujævne
• Opret en loddfarveovergang, når x1 og x2 er ens og y1 og y2 er ujævne
• Opret en vinkelfarveovergang, når x1 og x2 er forskellige og y1 og y2 er ujævne

Eksempel 1

Definer en ellipse med en horisontal linær farveovergang fra gult til rødt:

Dette er SVG-koden:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad1" 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="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

Prøv det selv

Kodeforklaring:

• id-attributten i <linearGradient>-etiketten definerer den unikke navn på overgangen
• x1, x2, y1, y2-attributterne i <linearGradient>-etiketten definerer begyndelsen og slutningen af overgangen
• Farverummet for overgangen kan bestå af to eller flere farver. Hver farve specificeres med en <stop>-markør
• offset-attributten bruges til at definere begyndelsen og slutningen af overgangens farve
• fill-attributten forbinder cirkel-elementet med en overgang

Eksempel 2

Definerer en cirkel med en vertikal lineær overgang fra guld til rød:

Dette er SVG-koden:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

Prøv det selv

Eksempel 3

Definerer en cirkel og tilføjer tekst inden for cirklen, med en horisontal lineær overgang fra guld til rød:

Dette er SVG-koden:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad3" 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="70" rx="85" ry="55" fill="url(#grad3)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">
  SVG</text>
</svg>

Prøv det selv

Kodeforklaring:

• <text> element bruges til at tilføje tekst