Линейный градиент SVG

Описание градиентов SVG

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

В SVG существуют два основных вида градиентов:

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

Элемент `<linearGradient>`

Элемент <linearGradient> определяет линейные градиенты для заливки графических элементов. Он должен находиться внутри тега <defs>, который содержит определения конкретных элементов, таких как градиенты.

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

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

DANGER

Не путайте линейный градиент SVG с CSS-свойством radial-gradient. Градиенты CSS применяются к HTML-элементам, а градиенты SVG — к элементам SVG.

Пример элемента `<linearGradient>` для создания эллипса с горизонтальным линейным градиентом:

Пример элемента <linearGradient> для создания эллипса с горизонтальным линейным градиентом

html

<!DOCTYPE html>
<html>
  <body>
    <svg height="200" width="300">
      <defs>
        <linearGradient id="ellipse" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" style="stop-color:rgb(28, 135, 201);stop-opacity:1" />
          <stop offset="100%" style="stop-color:rgb(128, 0, 128);stop-opacity:1" />
        </linearGradient>
      </defs>
      <ellipse cx="150" cy="90" rx="105" ry="65" fill="url(#ellipse)" />
    </svg>
  </body>
</html>

Try it Yourself »

Пример элемента `<linearGradient>` для создания эллипса с вертикальным линейным градиентом:

Пример элемента <linearGradient> для создания эллипса с вертикальным линейным градиентом

html

<!DOCTYPE html>
<html>
  <body>
    <svg height="300" width="400">
      <defs>
        <linearGradient id="ellipse" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" style="stop-color:rgb(28, 135, 201);stop-opacity:1" />
          <stop offset="100%" style="stop-color:rgb(128, 0, 128);stop-opacity:1" />
        </linearGradient>
      </defs>
      <ellipse cx="250" cy="100" rx="110" ry="70" fill="url(#ellipse)" />
    </svg>
  </body>
</html>

Try it Yourself »

Атрибуты

Значение	Описание
gradientUnits	Этот атрибут указывает систему координат для атрибутов x1, x2, y1, y2. Значения: `userSpaceOnUse`, `objectBoundingBox`.
gradientTransform	Этот атрибут добавляет дополнительное преобразование к системе координат градиента.
href	Этот атрибут указывает ссылку на другой элемент `<linearGradient>`.
spreadMethod	Этот атрибут указывает, как ведет себя градиент, если он начинается или заканчивается в пределах формы, содержащей градиент. Значения: `pad`, `repeat`, `reflect`.
x1	Этот атрибут указывает координату x начальной точки векторного градиента, вдоль которого рисуется линейный градиент.
x2	Этот атрибут указывает координату x конечной точки векторного градиента, вдоль которого рисуется линейный градиент.
y1	Этот атрибут указывает координату y начальной точки векторного градиента, вдоль которого рисуется линейный градиент.
y2	Этот атрибут указывает координату y конечной точки векторного градиента, вдоль которого рисуется линейный градиент.

Элемент SVG <linearGradient> также поддерживает Глобальные атрибуты и Атрибуты событий.

Практика

Для чего используются атрибуты 'x1', 'y1', 'x2' и 'y2' в линейном градиенте SVG в HTML?

Они используются для указания начальной и конечной точки градиента в процентах.Они используются для настройки цвета градиента.Они используются для определения ориентации градиента: горизонтальной, вертикальной или диагональной.Они используются для определения длительности анимации в SVG.

Линейный градиент SVG ​

Описание градиентов SVG ​

Элемент <linearGradient> ​

Пример элемента <linearGradient> для создания эллипса с горизонтальным линейным градиентом: ​

Пример элемента <linearGradient> для создания эллипса с вертикальным линейным градиентом: ​

Атрибуты ​