SVG linjär toning

SVG gradation

Gradation är en mjuk övergång från en färg till en annan. Dessutom kan flera färger användas för att övergå till samma element.

SVG har två huvudsakliga typer av gradationer:

• Linjär gradation
• Radiell gradation

SVG linjär gradation - <linearGradient>

<linearGradient> Element används för att definiera linjär gradation.

<linearGradient> Element måste inneslutas i <defs> inuti märket.<defs> Element är en förkortning av definitioner som innehåller definitioner av specialelement (t.ex. filter).

Linjär gradation kan definieras som horisontell, vertikal eller vinkelgradation:

• Skapa en horisontell gradation när y1 och y2 är lika och x1 och x2 inte är lika.
• Skapa en vertikal gradation när x1 och x2 är lika och y1 och y2 inte är lika.
• Skapa en vinkellinjär gradation när x1 och x2 är olika och y1 och y2 inte är lika.

Exempel 1

Definiera en ellips med en horisontell linjär gradation från gult till rött:

Detta är 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>

Prova själv

Kodförklaring:

• id-attributet i <linearGradient>-taggen definierar gradientens unika namn
• x1, x2, y1, y2-attributen i <linearGradient>-taggen definierar början och slutet av gradienten
• Färgområdet för gradienten kan bestå av två eller flera färger. Varje färg specificeras med en <stop>-tagg
• offset-attributet används för att definiera början och slutet av gradientens färg
• fill-attributet länkar ellipsen till en gradient

Exempel 2

Definiera en ellips med en vertikal linjär gradient från gul till röd:

Detta är 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>

Prova själv

Exempel 3

Definiera en ellips och lägg till text inom ellipsen, den har en horisontell linjär gradient från gul till röd:

Detta är 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>

Prova själv

Kodförklaring:

• Elementet <text> används för att lägga till text