SVG linearGradient
Изучите элемент SVG linearGradient и его дочерние stop: offset, stop-color, x1/x2/y1/y2, gradientUnits и spreadMethod с примерами.
Линейный градиент — это плавный переход от одного цвета к другому вдоль прямой линии. В SVG он создаётся с помощью двух совместно работающих элементов: <linearGradient>, который задаёт направление и систему координат линии, и одного или нескольких дочерних элементов <stop>, размещающих цвета вдоль неё. Затем атрибут fill (или stroke) фигуры ссылается на градиент по его id с помощью fill="url(#myGradient)".
На этой странице рассматриваются элемент <linearGradient>, его дочерние элементы <stop>, координаты x1/x2/y1/y2, задающие направление градиента, а также атрибуты gradientUnits и spreadMethod, управляющие его отображением и тиражированием.
Описание SVG-градиентов
Градиент — это плавное смешение цветов, которое можно повторно использовать в качестве заливки для любого количества фигур. В SVG есть два основных вида градиентов:
- linear — цвета смешиваются вдоль прямой линии (эта страница).
- radial — цвета смешиваются наружу от центральной точки. См. SVG radialGradient.
Элемент <linearGradient>
Элемент <linearGradient> определяет линейный градиент, которым заполняются (или обводятся) графические элементы. Это определение, а не видимая фигура, поэтому оно размещается внутри блока <defs>, получает id и на него ссылаются из фигуры с помощью fill="url(#id)".
Направление градиента задаётся начальной точкой (x1, y1) и конечной точкой (x2, y2). Линия градиента проходит от начальной точки до конечной; цвета интерполируются вдоль неё.
Линейные градиенты могут быть горизонтальными, вертикальными или угловыми:
- Горизонтальный —
y1иy2равны, аx1иx2различаются. - Вертикальный —
x1иx2равны, аy1иy2различаются. - Угловой (диагональный) — различаются как пара x, так и пара y.
Если координаты не указаны, SVG по умолчанию использует x1="0%", y1="0%", x2="100%", y2="0%" — горизонтальный градиент слева направо.
Не путайте SVG-линейный градиент с функцией CSS linear-gradient. CSS-градиенты закрашивают HTML-элементы через background-image, тогда как SVG-градиенты закрашивают SVG-фигуры через fill или stroke.
Элемент <stop>
Каждый элемент <stop> размещает один цвет в определённой позиции вдоль линии градиента. Для видимого перехода необходимо как минимум два stop-элемента. Их можно стилизовать с помощью атрибутов представления (stop-color, stop-opacity) или эквивалентного CSS внутри атрибута style, как в примерах ниже.
| Атрибут | Описание |
|---|---|
offset | Позиция stop вдоль линии градиента: число от 0 до 1 или процент от 0% до 100%. 0% — начальная точка, 100% — конечная точка. |
stop-color | Цвет stop. Принимает любой CSS-цвет (именованный, #hex, rgb(), hsl()). По умолчанию black. |
stop-opacity | Непрозрачность цвета stop: от 0 (прозрачный) до 1 (непрозрачный). По умолчанию 1. |
Пример элемента <linearGradient> для создания эллипса с горизонтальным линейным градиентом:
<!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>Пример элемента <linearGradient> для создания эллипса с вертикальным линейным градиентом:
<!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>Пример углового (диагонального) линейного градиента:
По умолчанию gradientUnits имеет значение objectBoundingBox, поэтому координаты являются долями ограничивающего прямоугольника фигуры. Использование x1="0" y1="0" x2="1" y2="1" проводит линию градиента из верхнего левого угла в нижний правый, создавая диагональный переход.
<!DOCTYPE html>
<html>
<body>
<svg height="200" width="300">
<defs>
<linearGradient id="diagonal" x1="0" y1="0" x2="1" y2="1">
<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>
<rect x="20" y="20" width="260" height="160" fill="url(#diagonal)" />
</svg>
</body>
</html>Атрибут gradientUnits
gradientUnits определяет, как интерпретируются значения x1, y1, x2 и y2:
objectBoundingBox(по умолчанию) — координаты задаются относительно закрашиваемой фигуры, где0(или0%) соответствует одному краю, а1(или100%) — противоположному. Градиент автоматически растягивается, подстраиваясь под каждую фигуру.userSpaceOnUse— координаты представляют собой абсолютные позиции в пользовательской системе координат SVG (те же единицы, что и у атрибутовx/yфигуры).
Частая ошибка: при userSpaceOnUse процентные значения и значения 0–1 больше не привязываются к фигуре. Необходимо задавать реальные координаты (например, x1="20" y1="0" x2="280" y2="0"), перекрывающие фигуру, иначе заливка может выглядеть плоской (одним цветом), так как линия градиента никогда не пересекает её.
Атрибут spreadMethod
spreadMethod управляет тем, что происходит за пределами отрезка [x1,y1]–[x2,y2], когда линия градиента короче фигуры. Видимый эффект проявляется только тогда, когда градиент не охватывает всю фигуру целиком.
| Значение | Поведение |
|---|---|
pad (по умолчанию) | Цвета первого и последнего stop распространяются («заполняют») оставшуюся область. |
reflect | Градиент отражается туда и обратно, повторяясь в чередующихся направлениях. |
repeat | Градиент тиражируется: после последнего stop он возвращается к первому и повторяется. |
<!DOCTYPE html>
<html>
<body>
<svg height="120" width="300">
<defs>
<linearGradient id="repeated" x1="0" y1="0" x2="0.2" y2="0"
spreadMethod="repeat">
<stop offset="0%" stop-color="rgb(28, 135, 201)" />
<stop offset="100%" stop-color="rgb(128, 0, 128)" />
</linearGradient>
</defs>
<rect x="0" y="0" width="300" height="120" fill="url(#repeated)" />
</svg>
</body>
</html>Измените spreadMethod="repeat" на reflect или pad в примере выше, чтобы сравнить три варианта поведения: repeat даёт резкие цветовые переходы, reflect создаёт плавное «пинг-понговое» отражение, а pad показывает градиент один раз, а затем сплошной блок последнего цвета.
Атрибуты
| Значение | Описание |
|---|---|
| gradientUnits | Этот атрибут задаёт систему координат для атрибутов x1, x2, y1, y2. Значения: userSpaceOnUse, objectBoundingBox. |
| gradientTransform | Этот атрибут задаёт дополнительное преобразование системы координат градиента. |
| href | Этот атрибут задаёт ссылку на другой элемент <linearGradient>. |
| spreadMethod | Этот атрибут определяет поведение градиента, если он начинается или заканчивается внутри границ фигуры, содержащей градиент. Значения: pad, repeat, reflect. |
| x1 | Этот атрибут задаёт координату x начальной точки вектора градиента, вдоль которого рисуется линейный градиент. |
| x2 | Этот атрибут задаёт координату x конечной точки вектора градиента, вдоль которого рисуется линейный градиент. |
| y1 | Этот атрибут задаёт координату y начальной точки вектора градиента, вдоль которого рисуется линейный градиент. |
| y2 | Этот атрибут задаёт координату y конечной точки вектора градиента, вдоль которого рисуется линейный градиент. |
Элемент SVG <linearGradient> также поддерживает Глобальные атрибуты и Атрибуты событий.
Для радиальных цветовых переходов, распространяющихся наружу от центральной точки вместо линии, см. SVG radialGradient.