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

Выводим текст

Градиенты в CSS и SVG очень похожи. Основная разница в том, что SVG представляет градиент в виде разметки. Это делает градиенты в SVG более удобными для чтения и понимания. Линейный градиент (градиент, который меняет свой цвет по прямой линии) можно создать с помощью тега linearGradient, внутри которого указываются опорные точки:

<linearGradient id="rect_gradient">
    <stop stop-color="tomato" offset="0" />
    <stop stop-color="roayalblue" offset="1" />
</linearGradient>

Созданному градиенту нужно присвоить идентификатор, на который можно сослаться. Нарисуем градиентный прямоугольник. Градиент обычно помещают в секцию defs:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="100" viewBox="0 0 300 100">
  <defs>
      <linearGradient id="rect_gradient">
        <stop stop-color="tomato" offset="0" />
        <stop stop-color="royalblue" offset="1" />
      </linearGradient>
  </defs>
  <rect x="0" y="0" width="300" height="100" fill="url(#rect_gradient)" />
</svg>

По умолчанию градиенты идут слева направо. Мы можем изменить данное поведение.

Опорные точки stop являются ограничителями градиента. Атрибут offset указывает на позицию смещения и записывается от 0 до 1 или от 0% до 100%, указывая на точку выхода цветов.

Цвета градиентов можно задавать через любую систему цветов в CSS.

Можно задать цвет через CSS. Такой подход являются более гибким в некоторых случаях.

rect {
    fill: url(#rect_gradient);
}

<rect x="0" y="0" width="300" height="100" />

Мы привыкли, что градиент – это плавный переход от одного цвета к другому. Но если опорные точки пододвинуть друг к другу достаточно близко, то можно создать четкий переход:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="100" viewBox="0 0 300 100">
  <defs>
      <linearGradient id="sharp_gradient">
        <stop stop-color="tomato" offset="0.5" />
        <stop stop-color="royalblue" offset="0.5" />
      </linearGradient>
  </defs>
  <rect x="0" y="0" width="300" height="100" fill="url(#sharp_gradient)" />
</svg>

У элемента stop есть также дополнительный атрибут stop-opacity для задания уровня прозрачности.

<linearGradient id="opacity_gradient">
  <stop stop-color="yellow" offset="0" stop-opacity="0" />
  <stop stop-color="blue" offset="0.5" />
  <stop stop-color="black" offset="1" stop-opacity="0.5" />
</linearGradient>

Меняем направление градиента

По умолчанию градиенты идут слева направо. В SVG градиент задаёт точки x1, y1, x2, и y2 для постановки направления линейного градиента. Обратите внимание, что не всем атрибутам нужны значения для создания градиента, так как по умолчанию они уже имеют значение 0 кроме точки x2, которая по умолчанию имеет значение 100%. Так мы получаем линейный SVG градиент с направлением слева направо. Чтобы создать диагональный градиент, необходимо точке y2 задать 100%, т.е. мы указываем нижнюю правую точку прямоугольника. Помните, что у нас не будет градиента с наклоном в 45°, так как значения относительны размерам элемента и не имеют абсолютного позиционирования.

<linearGradient id="diagonal_gradient" y2="100%";>
  <stop stop-color="tomato" offset="0" />
  <stop stop-color="black" offset="0.5" />
  <stop stop-color="royalblue" offset="1" />
</linearGradient>

SVG на данный момент поддерживает только линейные и радиальные градиенты. Конусные градиенты (градиенты по дуге) были предложены для внесения в CSS, а сетчатые (градиенты в двумерных сетках с цветами, выходящими из каждой точки) запланированы в SVG2.

Дополнительное чтение

Градиент для текста

Вернуться в раздел SVG

Реклама