Единицы градиента SVG: один переход для контуров логотипа

Чтобы распределить один градиент по отдельным контурам SVG, используйте gradientUnits="userSpaceOnUse", задайте конечные точки в координатах изображения и сохраняйте контуры в одной системе координат. Тогда каждый контур показывает часть перехода в своем положении. Части логотипа могут оставаться отдельно редактируемыми.

По умолчанию objectBoundingBox подгоняет градиент под каждый окрашиваемый элемент. Поэтому ссылка на один ID градиента из трех контуров может дать три полных перехода от фиолетового к оранжевому. Изменение единиц исправляет это повторение, но преобразованный дочерний элемент все еще может сдвинуть свое окрашивание. Справка MDN по gradientUnits определяет опорное пространство как текущее пользовательское пространство элемента, использующего градиент.

Это пошаговое руководство использует исходную трехчастную эмблему, нарисованную напрямую контурами SVG. Если векторный логотип уже есть, работайте с этим оригиналом. Исходнику только в растре нужно восстановление геометрии перед этим этапом правки окрашивания; более общее руководство по векторизации градиентов объясняет этот выбор.

Решите, принадлежит ли переход каждой фигуре или всему знаку

Используйте окрашивание относительно объекта, если каждая часть должна иметь собственный полный переход. Используйте общие конечные точки пользовательского пространства, если левая и правая части должны брать разные цвета из одного перехода.

Задание группе fill="url(#brandBlend)" передает заливку ее дочерним элементам. Оно не заставляет градиент object-bounding-box измерять общий силуэт группы. Дочерние элементы по-прежнему получают собственное окрашивание. Спецификация источников окрашивания SVG описывает градиенты как ресурсы, на которые ссылаются заливка или обводка элемента.

Одна эмблема, четыре выбора координат

Задайте конечные точки, охватывающие графику

Контуры примера занимают горизонтальные положения от x=30 до x=310. Это конечные точки перехода. Треугольник заканчивается на x=125, средний блок занимает от 140 до 210, а правая фигура идет от 225 до 310.

Сохраните это как shared-logo.svg и откройте в браузере:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 170" width="720" height="340">
  <defs>
    <linearGradient id="brandBlend" gradientUnits="userSpaceOnUse" x1="30" y1="0" x2="310" y2="0">
      <stop offset="0" stop-color="#5939d8" />
      <stop offset="0.5" stop-color="#ee4380" />
      <stop offset="1" stop-color="#ffae42" />
    </linearGradient>
  </defs>
  <g fill="url(#brandBlend)">
    <path d="M30 120 L90 30 L125 120 Z" />
    <path d="M140 45 H210 V135 H140 Z" />
    <path d="M225 30 H310 L280 135 H225 Z" />
  </g>
</svg>

Вы должны увидеть фиолетовый треугольник, преимущественно розовый центральный блок и правую фигуру с оранжевыми оттенками, как в B. Пустые зазоры скрывают участки одного перехода; цвет не начинается заново с началом следующего контура. Измените одну точку градиента, и все три части обновятся, поскольку ссылаются на одно определение.

Для прямого сравнения с A замените атрибуты градиента gradientUnits, x1, y1, x2 и y2 на x1="0%" y1="0%" x2="100%" y2="0%". Пропуск gradientUnits восстанавливает значение по умолчанию. Теперь каждая фигура получает полный цветовой переход.

У процентов тоже другая основа: при userSpaceOnUse они относятся к текущей области просмотра SVG, а не к ограничивающему прямоугольнику окрашиваемого объекта. Явные числа упрощают проверку этого примера. Логотип, занимающий только часть большого viewBox, не обязан использовать полную ширину viewBox для перехода.

Проверьте преобразования, если цвет одной части неверен

В C правая фигура выглядит так, будто осталась на месте. Координаты ее контура сместились на 60 единиц влево, а дочерняя группа переместила ее на 60 единиц вправо:

<g transform="translate(60 0)">
  <path d="M165 30 H250 L220 135 H165 Z" />
</g>

Замените третий контур в полном примере этой группой, чтобы воспроизвести несовпадение. Ее видимый левый край остается на x=225, но локальный левый край — x=165. Градиент использует это локальное пространство, поэтому часть берет более ранний, более розовый участок перехода. userSpaceOnUse не обещает единую глобальную систему координат независимо от вложенных преобразований.

Для этой эмблемы восстановите исходные координаты третьего контура и удалите его отдельный перенос. Если нужно переместить весь логотип, вместо этого примените transform="translate(10 0)" к существующей внешней группе. Это дает D: все три фигуры и их общее окрашивание перемещаются вместе.

Это исправление работает, потому что контуры уже выражены в общей системе координат. Помещение несвязанных преобразованных дочерних элементов внутрь еще одной группы не удаляет их индивидуальные преобразования. Для импортированного логотипа проверьте их перед сведением или переписыванием геометрии и сохраните копию исходного оригинала.

Когда полезен gradientTransform

gradientTransform меняет отображение координат окрашивания без изменения геометрии контура. Он полезен, когда намеренно нужно повернуть, наклонить или переместить переход. MDN описывает его как дополнительное преобразование, применяемое после установки системы координат, выбранной через gradientUnits.

Не корректируйте одно общее определение ради компенсации одного дочернего элемента без проверки остальных. Это может затронуть каждую фигуру, ссылающуюся на это определение. Для простого логотипа здесь сохранение графики в общем пространстве проще в поддержке; более сложной импортированной графике могут понадобиться отдельно сопоставленные определения градиентов.

Где нужен PerfectVector

Если единственный исходник — логотип PNG или JPG, PerfectVector может помочь восстановить редактируемую векторную геометрию перед восстановлением согласованного градиента. Векторизуйте логотип, затем проверьте силуэт, отверстия и отдельные части в редакторе. Используйте эти фигуры как отправную точку для общего окрашивания.

Демонстрация выше создана вручную для выделения поведения координат; это не результат преобразования PerfectVector. Не следует рассчитывать, что трассировка затененных пикселей восстановит исходные точки градиента или его настройки координат. Простой логотип также может быть быстрее перерисовать вручную. Сохраняйте существующий SVG, AI или векторный PDF, если он доступен.

Для фигуры, которая не принимает новую заливку, используйте проверки перекрашивания SVG перед изменением координат градиента. Если один экспорт отличается между приложениями, выполните диагностику смены цвета SVG.

Откройте файл заново перед передачей

Сохраните новый SVG и проверьте именно файл, а не только холст редактора. Проверьте следующее:

• ID градиента существует, и каждый нужный контур ссылается на него.
• Переход покрывает границы логотипа в нужном направлении.
• Перемещение всего знака сохраняет согласованность цветов.
• Отдельные части остаются выделяемыми там, где их нужно редактировать.
• Принимающее приложение сохраняет ожидаемый вид.

Плавная браузерная отрисовка демонстрирует поведение окрашивания в этом браузере. Она не подтверждает поддержку в каждом редакторе и не превращает градиент в геометрию резки. Сохраните версию с однотонными заливками для процессов, которым нужны сплошные фигуры, и редактируемый оригинал SVG. Руководство по файлам SVG объясняет различие между геометрическим содержимым файла и его отображаемым видом.

Частые вопросы

Нужно ли объединять контуры для общего градиента? Нет. Отдельные контуры могут ссылаться на один градиент. Используйте userSpaceOnUse с подходящими конечными точками и убедитесь, что контуры используют общую систему координат.

Почему после группировки контуров градиент все еще повторяется? Группа может передать заливку дочерним контурам, но градиент objectBoundingBox по-прежнему использует границы каждого окрашиваемого дочернего элемента. Задайте конечные точки пользовательского пространства, если переход должен охватывать весь знак.

Почему цвет одного контура изменился после перемещения в группу? Преобразование этой группы может изменить локальную систему координат контура. Сравните его преобразования с другими контурами и проверьте экспортированный SVG перед коррекцией общего градиента.

Источники

1. MDN — gradientUnits — Определяет значение по умолчанию, опорные системы координат и поведение процентов.
2. SVG Working Group — Paint servers — Определяет повторно используемое градиентное окрашивание, точки градиента и поведение распространения.
3. MDN — gradientTransform — Объясняет дополнительные преобразования координат градиента.

Начинаете с растрового логотипа? Преобразуйте логотип в редактируемые контуры SVG, проверьте отдельные фигуры, затем восстановите общий градиент и заново откройте итоговый экспорт для проверки его выравнивания.