SVG linjär gradient

SVG-tonningar måste definieras inom <defs>-etiketten.

SVG-tonning

En tonning är en mjuk övergång från en färg till en annan. Dessutom kan flera färger övergångar tillämpas på samma element.

I SVG finns det två huvudsakliga typer av tonningar:

  • Linjär tonning
  • Radiell tonning

Linjär tonning

<linearGradient> används för att definiera linjära tonningar i SVG.

<linearGradient>-etiketten måste vara inbäddad i <defs>-etikettens inre. <defs> är en förkortning för definitions, och den används för att definiera specialelement som tonningar.

Linjära tonningar kan definieras som horisontella, vertikala eller kanttonningar:

  • När y1 och y2 är lika, och x1 och x2 är olika, kan du skapa en horisontell tonning
  • När x1 och x2 är lika, och y1 och y2 är olika, kan du skapa en vertikal tonning
  • När x1 och x2 är olika, och y1 och y2 är olika, kan du skapa en kanttonning

Kopiera följande kod till enanteckningsbok och spara filen som "linear1.svg". Lägg denna fil i din webbdirectory:

xml version="1.0" standalone="no"
Dokumenttype DTD för SVG 1.1 
"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>

Kodförklaring:

  • id-egenskapen för <linearGradient>-etiketten kan definiera en unik namn för tonningen
  • fill:url(#orange_red) egenskapen länkar ellipselementet till denna tonning
  • x1, x2, y1, y2-egenskaperna för <linearGradient>-etiketten kan definiera tonningens början och slut
  • Färgskalan för tonningen kan bestå av två eller flera färger. Varje färg definieras genom en <stop>-etikett. Offset-egenskapen används för att definiera tonningens början och slut.

Se exempel (horisontell tonning)

En annan exempel:

xml version="1.0" standalone="no"
Dokumenttype DTD för SVG 1.1 
"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>

Visa exempel (vertikell gradient)