Последние учебники веб-разработки
 

SVG Градиенты - Линейный


SVG Градиенты

Градиент представляет собой плавный переход от одного цвета к другому. Кроме того, несколько цветовых переходов могут применяться к тому же элементу.

Есть два основных типа градиентов в SVG:

  • линейный
  • радиальный

SVG Linear Gradient - <LinearGradient>

<linearGradient> Элемент используется для определения линейного градиента.

<linearGradient> элемент должен быть вложен в <defs> тега. <defs> Тег короток для определений и содержит определение специальных элементов (such as gradients) .

Линейные градиенты могут быть определены как по горизонтали, вертикали или угловых градиентов:

  • Горизонтальные градиенты создаются при y1 и y2 равны и x1 и x2 различаются
  • Вертикальные градиенты создаются при x1 и x2 равны и y1 и y2 различаются
  • Угловые градиенты создаются при x1 и x2 различаются и y1 и y2 различаются

Пример 1

Определить эллипс с горизонтальным линейным градиентом от желтого до красного:

style="stop-color:rgb(255,255,0);stop-opacity:1" /> style="stop-color:rgb(255,0,0);stop-opacity:1" /> заполнить = "URL (# grad1)" /> К сожалению, ваш браузер не поддерживает встроенный SVG.

Вот код 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>
Попробуй сам "

Code explanation:

  • id атрибут <linearGradient> тег определяет уникальное имя для градиента
  • X1, x2, y1, y2 атрибуты <linearGradient> тега определяют начальную и конечную позицию градиента
  • Диапазон цвета для градиента может состоять из двух или более цветов. Каждый цвет задается с <stop> тега. offset атрибут используется для определения , где градиент цвета начало и конец
  • fill атрибут связывает элемент Эллипс с градиентом

Пример 2

Определить эллипс с вертикальным линейным градиентом от желтого до красного:

style="stop-color:rgb(255,0,0);stop-opacity:1" /> style="stop-color:rgb(255,255,0);stop-opacity:1" /> заполнить = "URL (# grad2)" /> К сожалению, ваш браузер не поддерживает встроенный SVG.

Вот код 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,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(#grad2)" />
</svg>
Попробуй сам "

Пример 3

Определить эллипс с горизонтальным линейным градиентом от желтого до красного, и добавить текст внутри эллипса:

style="stop-color:rgb(255,255,0);stop-opacity:1" /> style="stop-color:rgb(255,0,0);stop-opacity:1" /> заполнить = "URL (# grad3)" /> SVG К сожалению, ваш браузер не поддерживает встроенный SVG.

Вот код 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>
Попробуй сам "

Code explanation:

  • <text> элемент используется для добавления текста