Gradacje liniowe SVG

SVG przejścia kolorów

Przejście kolorów to gładkie przejście od jednego koloru do drugiego. Dodatkowo, można zastosować różne przejścia kolorów do jednego elementu.

W SVG istnieją dwa główne typy przejść kolorów:

• Liniowe przejście kolorów
• Radyjne przejście kolorów

SVG liniowy przejście kolorów - <linearGradient>

<linearGradient> Element używany do definiowania liniowych przejść kolorów.

<linearGradient> Element musi być umieszczony wewnątrz <defs> Wewnątrz znacznika.<defs> Element jest skrótem od definicji (definitions), który zawiera definicje specjalnych elementów (np. filtry).

Liniowe przejścia kolorów mogą być zdefiniowane jako poziome, pionowe lub kątowe:

• Tworzenie poziomego przejścia kolorów, gdy y1 i y2 są równe, a x1 i x2 są różne
• Tworzenie pionowego przejścia kolorów, gdy x1 i x2 są równe, a y1 i y2 są różne
• Tworzenie kątowego przejścia kolorów, gdy x1 i x2 są różne, a y1 i y2 są różne

Przykład 1

Zdefiniować elipsę z poziomym liniowym przejściem kolorów od żółtego do czerwonego:

To jest kod SVG:

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

Spróbuj sam

Wyjaśnienie kodu:

• Atrybut id znacznika <linearGradient> definiuje unikalną nazwę gradientu
• Atrybuty x1, x2, y1, y2 znacznika <linearGradient> definiują początek i koniec gradientu
• Zakres kolorów gradientu może być złożony z dwóch lub więcej kolorów. Każdy kolor jest określony za pomocą znacznika <stop>
• Atrybut offset definiuje początek i koniec koloru gradientu
• Atrybut fill łączy element elipsy z gradientem

Przykład 2

Definiuje elipsę, która ma pionową liniową przenośność od żółtego do czerwonego:

To jest kod SVG:

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

Spróbuj sam

Przykład 3

Definiuje elipsę i dodaje tekst do elipsy, który ma poziomą liniową przenośność od żółtego do czerwonego:

To jest kod SVG:

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

Spróbuj sam

Wyjaśnienie kodu:

• Element <text> służy do dodawania tekstu