Linear Gradients in SVG

SVG verloop

Een verloop is een soepele overgang van de ene kleur naar de andere. Bovendien kan een overgang van meerdere kleuren worden toegepast op hetzelfde element.

Er zijn twee soorten主要的 verloop in SVG:

• Lineair verloop
• Stralingsverloop

SVG lineair verloop - <linearGradient>

<linearGradient> Een element wordt gebruikt om een lineair verloop te definiëren.

<linearGradient> Een element moet genest zijn binnen <defs> binnen de markering.<defs> Een element is een afkorting van (definitions) en bevat definities van speciale elementen (bijvoorbeeld filters).

Een lineair verloop kan worden gedefinieerd als een horizontaal, verticaal of hoekverloop:

• Maak een horizontale verloop wanneer y1 en y2 gelijk zijn en x1 en x2 oneven zijn.
• Maak een verticale verloop wanneer x1 en x2 gelijk zijn en y1 en y2 oneven zijn.
• Maak een hoekverloop wanneer x1 en x2 verschillend zijn en y1 en y2 oneven zijn.

Voorbeeld 1

Definieer een cirkelvormig object met een horizontale lineaire kleurverloop van geel naar rood:

Dit is de SVG-code:

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

Try It Yourself

Code Explanation:

• De id-eigenschap van de <linearGradient>-tag definieert de unieke naam van de verloop.
• De x1, x2, y1, y2-eigenschappen van de <linearGradient>-tag definiëren de begin- en eindpositie van de verloop.
• Het kleurbereik van de verloop kan bestaan uit twee of meer kleuren. Elke kleur wordt gespecificeerd met een <stop>-tag.
• De offset-eigenschap wordt gebruikt om de begin- en eindpositie van de verloop te definiëren.
• De fill-eigenschap koppelt het cirkelvormige element aan de verloop.

Voorbeeld 2

Definieer een cirkelvormig object met een verticale lineaire kleurverloop van geel naar rood:

Dit is de SVG-code:

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

Try It Yourself

Voorbeeld 3

Definie een cirkelvormig object en voeg er tekst aan toe binnen deze cirkel, met een horizontale lineaire kleurverloop van geel naar rood:

Dit is de SVG-code:

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

Try It Yourself

Code Explanation:

• The <text> element is used to add text