Scalable Vector Graphics/Gradiënten en patronen

SVG

Inleiding
  1. Groeperen van elementen
  2. Hergebruiken van figuren
  3. Gradiënten en patronen
  4. Stijl
  5. Transformaties
  6. Filters
  7. Animeren
  8. Scripten
TE DOEN
TE DOEN

TE DOEN
Radiale gradiënt en patronen

Lineaire gradiënt

bewerken

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

bewerken
<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

bewerken
 
Informatie afkomstig van https://nl.wikibooks.org Wikibooks NL.
Wikibooks NL is onderdeel van de wikimediafoundation.