SVG-градиенты – линейные и радиальные примеры

SVG-градиенты создают плавные цветовые переходы, которые могут использоваться для заливки или обводки SVG-фигур, текста и контуров. В этом руководстве объясняется, как <linearGradient>, <radialGradient>, <stop>, fill="url(#id)" и stroke="url(#id)" работают вместе в SVG-разметке.

Краткий ответ: определите градиент внутри <defs>, задайте ему id, добавьте элементы <stop> с offset и stop-color, а затем ссылайтесь на градиент из фигуры или текстового элемента с помощью fill="url(#id)" или stroke="url(#id)".

1<svg width="220" height="120" xmlns="http://www.w3.org/2000/svg">
2  <defs>
3    <linearGradient id="brand-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
4      <stop offset="0%" stop-color="steelblue" />
5      <stop offset="100%" stop-color="gold" />
6    </linearGradient>
7  </defs>
8  <rect x="20" y="20" width="180" height="80" fill="url(#brand-gradient)" />
9</svg>

В этой статье вы узнаете, как:

создавать переиспользуемые определения SVG-градиентов в <defs>;
применять линейные и радиальные градиенты к fill и stroke;
управлять направлением градиента, фокусной точкой и точками градиента;
избегать типичных проблем с id, url(#id), offset и gradientUnits;
использовать связанные статьи Aspose.SVG, когда нужно создавать или редактировать градиенты программно.

SVG-градиенты

Градиент – это плавный цветовой переход между точками на поверхности рисования. SVG поддерживает два основных элемента градиента: <linearGradient> и <radialGradient>. Оба элемента работают как источники заливки и обводки: они определяются один раз, а затем используются видимыми элементами.

Размещайте <linearGradient> или <radialGradient> внутри <defs>, чтобы градиент можно было переиспользовать. Атрибут id задает имя градиента, а видимые элементы ссылаются на него через fill="url(#id)" или stroke="url(#id)". Это отделяет цветовой переход от фигур, текста или контуров, которые его используют.

Как создавать SVG-градиенты

Добавьте блок <defs> для хранения переиспользуемых определений градиентов.
Выберите <linearGradient> для прямолинейного цветового перехода или <radialGradient> для перехода, расходящегося от центра или фокусной точки.
Задайте уникальный id, чтобы видимые элементы могли ссылаться на градиент.
Добавьте элементы <stop> с возрастающими значениями offset и значениями stop-color.
Примените градиент с помощью fill="url(#id)" или stroke="url(#id)".
Настройте x1, y1, x2, y2, cx, cy, r, fx, fy или gradientUnits, если направление или масштаб отличаются от ожидаемых.

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

Линейный градиент изменяет цвет вдоль прямой линии, которая называется вектором градиента. Атрибуты x1, y1, x2 и y2 определяют этот вектор. Их значения могут быть числами или процентами в зависимости от системы координат, используемой градиентом.

Элемент <linearGradient> содержит вложенные элементы <stop>. Каждый элемент <stop> задает цвет в определенной позиции вдоль вектора. Атрибут offset задает позицию, а stop-color задает цвет ( linear-gradient.svg).

 1<svg height="250" width="700" xmlns="http://www.w3.org/2000/svg">
 2	<defs>
 3		<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
 4			<stop offset="10%" style="stop-color:LIGHTSALMON" />
 5			<stop offset="50%" style="stop-color:TEAL" />
 6			<stop offset="90%" style="stop-color:LIGHTPINK" />
 7		</linearGradient>
 8	</defs>
 9    <ellipse cx="300" cy="170" rx="165" ry="55" fill="url(#grad1)" />
10    <text x="10" y="85" font-family="Arial" stroke="grey" stroke-width="1" font-size="90" fill="url(#grad1)" >Linear Gradient</text>
11</svg>

Линейный градиент, примененный к SVG-тексту и эллипсу

В примере выше элементы <text> и <ellipse> используют fill="url(#grad1)", поэтому они разделяют одно и то же определение градиента. Три элемента <stop> создают видимый цветовой переход от LIGHTSALMON к TEAL и затем к LIGHTPINK.

Радиальный градиент SVG

Радиальный градиент меняет цвет, удаляясь от центра или фокусной точки. Атрибуты cx, cy и r определяют конечный круг градиента: cx и cy задают его центр, а r — радиус. Атрибуты fx и fy определяют фокусную точку, где визуально начинается градиент. Если cx и cy опущены, оба по умолчанию имеют значение 50%; если fx и fy опущены, они по умолчанию имеют те же значения, что и cx и cy.

В этом примере центр и фокусная точка используют одни и те же координаты. В системе координат objectBoundingBox по умолчанию 0.5 означает середину целевого элемента, поэтому радиальный градиент равномерно распространяется от центра ( radial-gradient.svg).

 1<svg height="300" width="600" xmlns="http://www.w3.org/2000/svg">
 2    <defs>
 3        <radialGradient id="myRG" cx="0.5" cy="0.5" r="0.9" fx="0.5" fy="0.5" spreadMethod="pad">
 4            <stop offset="0%" stop-color="BISQUE" />
 5            <stop offset="60%" stop-color="CADETBLUE" />
 6        </radialGradient>
 7    </defs>
 8    <ellipse cx="300" cy="170" rx="165" ry="55" fill="url(#myRG)" />
 9    <text x="10" y="85" font-family="Arial" stroke="grey" stroke-width="1" font-size="85" fill="url(#myRG)" >Radial Gradient</text>
10</svg>

Радиальный градиент, примененный к SVG-тексту и эллипсу

Следующий пример перемещает фокусную точку из центра к fx="25%" и fy="25%". Это сдвигает визуальный блик к верхней левой части залитой фигуры ( radial-gradient1.svg):

 1<svg height="300" width="600" xmlns="http://www.w3.org/2000/svg">
 2    <defs>
 3        <radialGradient id="myRG" cx="0.5" cy="0.5" r="0.8" fx="25%" fy="25%" spreadMethod="pad">
 4            <stop offset="0%" stop-color="BISQUE" />
 5            <stop offset="30%" stop-color="SILVER" />
 6            <stop offset="60%" stop-color="BISQUE" />
 7            <stop offset="90%" stop-color="GREY" />
 8        </radialGradient>
 9    </defs>
10    <ellipse cx="300" cy="170" rx="185" ry="65" fill="url(#myRG)" fill-opacity="1" />
11    <text x="10" y="85" font-family="Arial" stroke="grey" stroke-width="1" font-size="85" fill="url(#myRG)">Radial Gradient</text>
12</svg>

Радиальный градиент со смещенной фокусной точкой, примененный к SVG-тексту и эллипсу

Здесь несколько точек градиента и смещенная от центра фокусная точка создают более выраженный блик на эллипсе. Это распространенный способ сделать плоскую SVG-геометрию визуально более объемной.

Типичные ошибки и исправления

Проблема	Причина	Решение
Градиент не виден	У градиента нет `id`, ссылка неверна или целевой элемент его не использует	Присвойте градиенту уникальный `id`, ссылайтесь на него с помощью `url(#id)` и храните определения в `<defs>` для большей ясности
Градиент не применяется к фигуре	Некорректная ссылка в `fill` или `stroke`	Используйте `fill="url(#gradientId)"` или `stroke="url(#gradientId)"` и убедитесь, что `id` совпадает
Цвета идут в неожиданном направлении	Некорректные значения `x1`, `y1`, `x2`, `y2`	Настройте атрибуты вектора градиента, чтобы управлять направлением
Радиальный градиент не покрывает ожидаемую область	Радиус `r`, центр, фокусная точка или `gradientUnits` не соответствуют целевой форме	Отрегулируйте `r`, `cx`, `cy`, `fx`, `fy` или установите `gradientUnits="userSpaceOnUse"`, если вам нужны фиксированные координаты
Градиент масштабируется неожиданно	Используется значение по умолчанию `gradientUnits="objectBoundingBox"`	Задайте `gradientUnits="userSpaceOnUse"` для абсолютного позиционирования
Остановки не смешиваются должным образом	Значения `offset` отсутствуют, повторяются непреднамеренно или не в нужном порядке	Убедитесь, что значения `offset` следуют желаемому порядку от `0%` до `100%`
Градиент многократно дублируется	Одни и те же остановки повторяются в нескольких местах	Определите градиент один раз в `<defs>` и переиспользуйте его с `url(#id)`

Быстрые рецепты

Создать заливку линейным градиентом по горизонтали

1<linearGradient id="gradHorizontal" x1="0%" y1="0%" x2="100%" y2="0%">
2    <stop offset="0%" stop-color="steelblue" />
3    <stop offset="100%" stop-color="lightblue" />
4</linearGradient>

Создать вертикальный линейный градиент

1<linearGradient id="gradVertical" x1="0%" y1="0%" x2="0%" y2="100%">
2    <stop offset="0%" stop-color="orange" />
3    <stop offset="100%" stop-color="purple" />
4</linearGradient>

Применить градиент к обводке вместо заливки

1<rect x="20" y="20" width="200" height="120"
2      fill="none"
3      stroke="url(#gradHorizontal)"
4      stroke-width="10" />

Создать центрированный радиальный градиент

1<radialGradient id="radialCenter" cx="50%" cy="50%" r="50%">
2    <stop offset="0%" stop-color="white" />
3    <stop offset="100%" stop-color="darkblue" />
4</radialGradient>

Сместить фокусную точку радиального градиента

1<radialGradient id="radialFocus" cx="50%" cy="50%" r="60%" fx="25%" fy="25%">
2    <stop offset="0%" stop-color="gold" />
3    <stop offset="100%" stop-color="brown" />
4</radialGradient>

Переиспользовать один градиент для нескольких элементов

1<circle cx="80" cy="80" r="50" fill="url(#gradHorizontal)" />
2<rect x="160" y="30" width="100" height="100" fill="url(#gradHorizontal)" />

FAQ – SVG-градиенты

Как применить SVG-градиент к фигуре?

Определите градиент в <defs>, задайте ему id и установите для целевой фигуры fill или stroke равным url(#id). Ссылка должна точно совпадать с id градиента.

В чем разница между linearGradient и radialGradient?

Используйте <linearGradient> для цветового перехода вдоль прямой линии. Используйте <radialGradient>, когда цвет должен расходиться наружу от центра или фокусной точки.

Можно ли использовать SVG-градиент для обводки?

Да. Определите градиент в <defs> и задайте stroke="url(#id)" для целевого элемента. Используйте достаточно большое значение stroke-width, чтобы градиент был виден.

Почему один и тот же градиент выглядит по-разному на разных фигурах?

По умолчанию gradientUnits="objectBoundingBox" сопоставляет градиент с ограничивающей рамкой каждого элемента. Используйте gradientUnits="userSpaceOnUse", если нужно одинаковое координатное размещение градиента для нескольких элементов.

Можно ли программно изменять цвета SVG-градиента?

Да. В Python via .NET можно загрузить SVG и обновить атрибуты stop-color у элементов <stop>. См. Изменение цветов SVG в Python для рабочего процесса редактирования остановок градиента.

Связанные ресурсы

Спецификация SVG 2 Paint Servers определяет SVG-градиенты, источники заливки и обводки, элементы <stop> и связанные атрибуты.
SVG-градиенты в C# показывает, как программно создавать линейные и радиальные градиенты с помощью Aspose.SVG for .NET.
Изменение цветов SVG в Python включает пример Python via .NET для редактирования цветов stop-color в SVG-градиенте.
Цвет SVG объясняет значения цвета, прозрачность, fill и stroke, используемые в примерах градиентов.
SVG-фильтры объясняет визуальные эффекты, которые можно комбинировать с графикой, залитой градиентом.

SVG-фильтры Нарисовать снежинку