Scalable Vector Graphics/Gradiënten en patronen

Lineaire gradiënt

Een gradiënt is een kleur die overgaat in een andere kleur. Bij een lineaire gradiënt is dit van de ene kant naar een andere kant in een rechte lijn. Dit kan ook uit meerdere kleuren bestaan. Elke kleur wordt bepaald door een stop-tag. De stop-tag heeft natuurlijk de kleur (stop-color) nodig en ook waar (offset) de gradiënt deze kleur moet hebben. Een gradiënt dien je, net als een afbeelding die je meer dan eens wilt gebruiken, te definiëren in de defs-tag.

Voorbeeld

Code

<defs>
 <linearGradient id="RoodGroen">
  <stop offset="0%" stop-color="red" />
  <stop offset="100%" stop-color="green" />
 </linearGradient>
</defs>

<rect width="105" height="85" fill="url(#RoodGroen)" x="0" y="0" />

Afbeelding