SVG Radial Gradients

SVG cirkelvormige overgang - <radialGradient>

<radialGradient> Het element wordt gebruikt om een cirkelvormige overgang (radiële overgang) te definiëren.

<radialGradient> Het element moet worden ingesloten in <defs> binnen het etiket.<defs> Het element is een afkorting van definitions en bevat definities van speciale elementen (bijvoorbeeld filters).

Voorbeeld 1

Definieer een ellipse met een cirkelvormige overgang van wit naar blauw:

Dit is de SVG-code:

<svg height="150" width="500">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

Try It Yourself

Code-exploratie:

• De id-eigenschap van het <radialGradient>-etiket definieert de unieke naam van de overgang
• De cx, cy en r-eigenschappen definiëren de buitenste cirkel, terwijl fx en fy de binnenste cirkel definiëren
• De kleurreeks van de overgang kan bestaan uit twee of meer kleuren. Elke kleur wordt gespecificeerd met een <stop>-markering
• De offset-eigenschap wordt gebruikt om de begin- en eindpositie van de overgang te definiëren
• De fill-eigenschap koppelt het ellipse-element aan de overgang

Voorbeeld 2

Definieer een andere ellipse met een cirkelvormige overgang van wit naar blauw:

Dit is de SVG-code:

<svg height="150" width="500">
  <defs>
    <radialGradient id="grad2" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

Try It Yourself