Gradienty promieniste SVG

SVG radialny gradient - <radialGradient>

<radialGradient> Element używany do definiowania radialnych gradientów (promienistych gradientów).

<radialGradient> Element musi być umieszczony w <defs> w znaczniku.<defs> Element jest skrótem od definiowania (definitions) i zawiera definicje specjalnych elementów (np. filtry).

Przykład 1

Definiuj elipsę, która ma radialny gradient od bieli do niebieskiego:

To jest kod SVG:

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

Spróbuj sam

Wyjaśnienie kodu:

• Atrybut id znacznika <radialGradient> definiuje unikalną nazwę gradientu
• Atrybuty cx, cy i r definiują największy okrąg, a fx i fy definiują najmniejszy okrąg
• Zakres kolorów gradientu może być złożony z dwóch lub więcej kolorów. Każdy kolor jest oznaczony przez znacznik <stop>
• Atrybut offset definiuje początek i koniec gradientu kolorów
• Atrybut fill łączy element elipsy z gradientem

Przykład 2

Definiuj drugi elips, który ma radialny gradient od bieli do niebieskiego:

To jest kod SVG:

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

Spróbuj sam