> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Градиент SVG вдоль контура: проверьте цвет на изгибе > Сравните координатный градиент SVG с намеренно заданными цветными полосами на изогнутой ленте. Проверьте исходник, два размера и выберите компромисс геометрии. Source: https://perfectvector.com/ru/blog/svg-gradient-curved-stroke Language: ru Author: Irene Kim Published: 2026-10-05T08:00:00+09:00 Updated: 2026-10-05T08:00:00+09:00 Обычный SVG `linearGradient` не измеряет продвижение вдоль кривого контура. Он окрашивает по вектору градиента в системе координат. Если лента возвращается назад, две точки в одной позиции вдоль этого вектора могут получить один цвет, хотя вдоль ленты находятся далеко друг от друга. Для статичного дизайна, которому нужен переход цвета вокруг изгиба, можно создать отдельные цветные секции. Это даёт контроль последовательности, но добавляет геометрию и видимые цветовые границы. Наш оригинальный пример сравнивает горизонтальный градиент с восемью намеренными полосами на одном созданном маршруте. Оба файла содержат контуры и не содержат встроенного изображения. ## Проверьте, где повторяется цвет [Спецификация серверов окрашивания SVG2](https://www.w3.org/TR/SVG2/pservers.html) определяет линейные градиенты через вектор и цветовые точки. Радиальные градиенты описываются собственной круглой геометрией. Ни одно определение не превращает произвольный контур в цветовую ось расстояния вдоль пути. Наша лента начинается слева сверху, идёт вправо, огибает полуокружность и возвращается влево снизу. Горизонтальный градиент делает оба левых конца оранжевыми, а правый изгиб — фиолетовым. Это корректный координатный градиент; он просто отвечает на другую задачу дизайна, чем «менять цвет от начала этого маршрута до конца». [Урок MDN по градиентам](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Gradients) объясняет модель конечных точек и цветовых точек. Добавление точек меняет координатную цветовую последовательность. Оно не заставляет окрашивание следовать кривой. **Координатный цвет и созданные полосы** ![Концептуальное сравнение возвращающейся изогнутой ленты с повторяющимися цветами концов и ленты с дискретными цветами, последовательно меняющимися вокруг изгиба](https://perfectvector.com/blog/svg-gradient-curved-stroke/coordinate-and-bands.webp) *Иллюстрация: координатный градиент может повторять цвет на возвращающемся маршруте, а отдельные полосы могут задать другую последовательность от начала к концу. Фактические количества элементов исходника и браузерные образцы ниже относятся к независимо созданным файлам SVG.* ## Сохраните один обычный градиент как контроль Сохраните этот полный файл как `coordinate.svg`. Контур использует обводку в 24 единицы внутри viewBox `200×160`. Прямые участки и правая полуокружность образуют одну редактируемую осевую линию. ```svg ``` Мы используем `gradientUnits="userSpaceOnUse"`, чтобы явно задать конечные точки градиента в исходной системе координат. Переход к координатам ограничивающего прямоугольника изменил бы способ выражения этих точек, но не добавил бы окрашивание по расстоянию вдоль пути. См. [справочник gradientUnits](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientUnits) и наше [руководство по координатам градиента](https://perfectvector.com/ru/blog/svg-gradient-units). Весь маршрут — один элемент `path`. Храните эту простую версию как мастер геометрии, даже если решите передавать более сложное цветовое оформление. ## Создайте ступенчатую последовательность вокруг изгиба Сохраните следующий код как `bands.svg`. Он делит верхний прямой участок на две части, полуокружность — на четыре дуги, а возвращающийся прямой участок — на две части. Цвета назначены по порядку маршрута, от оранжевого в верхнем начале до фиолетового в нижнем конце. ```svg ``` Это восемь вручную выбранных полос с неодинаковыми длинами сегментов. Они не рассчитывают равномерное изменение цвета на единицу длины пути и не создают непрерывное затенение. Округлённые десятичные конечные точки дуг приближают исходный маршрут; пример не утверждает попиксельного совпадения очертания. [Справочник `path`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/path) описывает элемент и его данные. Каждая секция здесь остаётся осевой линией с обводкой, а не замкнутой фигурой с заливкой по внешнему очертанию. Если целевой среде нужны замкнутые фигуры, готовьте и проверяйте эту геометрию отдельно, не считая отрезки обводки контурами резки. Мы используем [`stroke-linecap="butt"`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/stroke-linecap), чтобы соседние части не выходили за конечные точки. Скруглённые концы каждого внутреннего участка перекрывали бы соседние цвета. Переходы прямой в дугу также требуют согласованных направлений; наше [руководство по гладким стыкам](https://perfectvector.com/ru/blog/svg-bezier-smooth-joins) отдельно описывает вопрос геометрической непрерывности. ## Сравните два размера и две позиции Мы отрисовали оба оригинальных файла в Chrome при `200×160` и `400×320` CSS-пикселях. Браузер декодировал каждый SVG, затем рисовал на холсте с размерами внутреннего буфера, совпадающими с размерами теста. Отношение пикселей устройства в браузере было 2; записанные образцы взяты из буфера холста, а не из подсчёта аппаратных пикселей снимка. В исходных координатах `(60,30)` и `(60,130)` точки лежат на разных прямых участках маршрута. У них одинаковая горизонтальная координата, поэтому горизонтальный градиент даёт одинаковый цвет образцов. | Файл | Верхний образец при x=60 | Нижний образец при x=60 | Контуры | Встроенные изображения | | ------------------------ | ------------------------ | ----------------------- | ------- | ---------------------- | | Координатный градиент | RGB 202,100,71 | RGB 202,100,71 | 1 | 0 | | Созданные полосы | RGB 227,107,44 | RGB 112,75,170 | 8 | 0 | | Плоский мастер геометрии | RGB 184,94,57 | RGB 184,94,57 | 1 | 0 | Пары образцов были одинаковыми в обоих проверенных размерах, с альфа-каналом 255 внутри окрашенных участков. Открытая область исходника `(100,80)` имела нулевой альфа-канал во всех шести случаях. Это проверяет данные созданные файлы в данном браузере, а не сертифицирует все средства отрисовки или все граничные пиксели. Полосатая отрисовка явно сохраняет дискретные изменения цвета в обоих размерах. Проверяйте стыки в передаваемом размере, особенно после экспорта или встраивания. Отдельные части могут выявлять швы из-за сглаживания, округления или последующих правок. Увеличение количества секций уменьшает каждый цветовой шаг, но также создаёт больше контуров и границ для сопровождения. ## Выберите оформление до раскрытия графики | Потребность дизайна | Полезная отправная точка | Что потребуется проверять | | ---------------------------------------------------- | ------------------------------------------------------------- | ----------------------------------------------------------------------- | | Цвет следует направлению страницы | Один координатный градиент | Положение конечных точек и границы исходника | | Статичная последовательность вокруг этого маршрута | Намеренно окрашенные секции | Цвета секций, касательные стыки и швы | | Плавная последовательность вдоль произвольной кривой | Отдельно разработанное приближение или другой способ передачи | Выборку, пересечения, редактируемую геометрию и отрисовку целевой среды | Поворот линейного градиента меняет его направление. Повторение меняет распространение цветов. Ни одна операция не заставляет его непрерывно поворачиваться с этой возвращающейся осевой линией. Радиальный градиент может подойти круглой композиции, но это собственная геометрия окрашивания, а не общее решение по расстоянию маршрута. Если позже меняете кривую, исправляйте секции совместно. Храните плоский мастер для сравнения нужного маршрута и отдельную копию цветового оформления. Наше [руководство по относительным контурам](https://perfectvector.com/ru/blog/svg-relative-path-commands) поможет читать или перемещать лежащие в основе команды контуров. Если исходная графика — PNG или JPG, а нужны редактируемые контуры, [преобразуйте исходник с PerfectVector](https://perfectvector.com/ru/image-to-vector), проверьте восстановленную форму и открытые области и сохраните чистый мастер SVG. Выбирайте или перестраивайте цветовое оформление после проверки геометрии. Векторизация не гарантирует точного восстановления непрерывного затенения и не изобретает встроенную функцию градиента вдоль пути. Существующему чистому SVG нужна прямая правка окрашивания и геометрии; [руководство по векторизации изображений](https://perfectvector.com/ru/blog/what-is-image-vectorization) объясняет, когда помогает преобразование растра. ## Частые вопросы **Можно ли заставить linearGradient следовать любой кривой обводке?** Обычное определение linearGradient не предоставляет настройки расстояния вдоль пути. Окрашивание управляется координатным вектором. Ступенчатый пример назначает отдельные цвета отдельным секциям маршрута. **Исправят ли дополнительные цветовые точки повторяющиеся цвета?** Больше точек могут уточнить цветовые переходы вдоль вектора градиента. Точки в одной позиции вдоль этого вектора всё ещё имеют одинаковое координатное окрашивание. **Содержит ли полосатый файл растровое изображение?** Нет. Наш созданный пример содержит восемь элементов path и не содержит image. Он также содержит видимые цветовые ступени, а не непрерывный градиент по расстоянию вдоль пути. **Нужно ли заменять каждый градиент отдельными контурами?** Используйте более простой координатный градиент, когда он соответствует дизайну. Отдельные секции полезны, если их последовательность и затраты на редактирование приемлемы; перед передачей проверяйте швы и целевую отрисовку. ## Источники 1. [W3C — Серверы окрашивания SVG2](https://www.w3.org/TR/SVG2/pservers.html) — Векторы градиентов, цветовые точки и координатное окрашивание. 2. [MDN — Градиенты в SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Gradients) — Построение линейных и радиальных градиентов. 3. [MDN — gradientUnits](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientUnits) — Пользовательская система координат и система ограничивающего прямоугольника. 4. [MDN — path](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/path) — Проверяемые элементы контуров и данные контуров. 5. [MDN — stroke-linecap](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/stroke-linecap) — Поведение плоских и круглых концов обводки. ## Explore - [Read the HTML article](https://perfectvector.com/ru/blog/svg-gradient-curved-stroke) - [Скругление углов SVG изменением залитой фигуры](https://perfectvector.com/ru/blog/round-svg-path-corners.md) - [Перенос текста SVG: создайте измеренные строки с tspan](https://perfectvector.com/ru/blog/svg-text-wrap-tspan.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)