Единицы узоров SVG: размер повторяющихся мотивов

Чтобы сохранять постоянный шаг повторения узора SVG при изменении размеров фигуры, используйте patternUnits="userSpaceOnUse" и числовые ширину и высоту плитки. Управляйте графикой внутри этой плитки отдельно через patternContentUnits или viewBox узора.

Это различие важно, когда небольшой мотив заполняет и узкий значок, и широкий баннер. Вам могут понадобиться больше копий в баннере, более крупные промежутки между копиями или растянутый мотив. Каждая задача требует своего выбора координат. Масштабирование всей группы баннера снова меняет результат.

Если мотив уже состоит из контуров SVG, сохраните их. Векторизация относится к более раннему этапу, когда единственный источник — растр.

Разделяйте плитку и её графику

Узор имеет повторяющуюся прямоугольную плитку и содержимое внутри неё. patternUnits управляет x, y, width и height плитки. patternContentUnits управляет координатами содержимого, если у узора нет viewBox.

С objectBoundingBox ширина .25 означает четверть ширины ограничивающей рамки закрашиваемого объекта. Это не четверть ширины мотива. Прямоугольник шириной 120 единиц получает плитку 30 единиц; прямоугольник шириной 240 — плитку 60 единиц.

По умолчанию содержимое остаётся в userSpaceOnUse. Поэтому изменение только patternUnits может менять промежутки между мотивами, оставляя размер каждого мотива прежним. Задавайте оба атрибута осознанно, не предполагая их совместного изменения.

Сравните четыре варианта одного листа

Мы нарисовали контуры листа для примера и отрисовали SVG в браузере. Оба целевых прямоугольника имеют высоту 80 единиц; их ширина — 120 и 240. Скриншот добавляет подписи и фоны вокруг этих исходных фигур. Это демонстрация SVG, а не результат преобразования PerfectVector.

Читайте ряды сверху вниз:

1. Фиксированная плитка 40 × 40 даёт три столбца в узком прямоугольнике и шесть в широком. Размеры листа не меняются.
2. Ширина плитки .25 сохраняет четыре столбца в обоих прямоугольниках. В широком прямоугольнике больше пространства между листьями, поскольку координаты листа всё ещё используют пользовательские единицы.
3. Координаты содержимого по ограничивающей рамке растягивают лист горизонтально при удвоении ширины заполняемой фигуры. Вертикальный размер остаётся прежним, поскольку высота заполняемой фигуры не меняется.
4. Фиксированная плитка 40 × 40 с viewBox="0 0 40 40" возвращает результат первого ряда, хотя patternContentUnits="objectBoundingBox" остаётся в разметке. viewBox узора имеет приоритет.

Откройте полный пример

Сохраните это как pattern-units.svg и откройте напрямую в браузере. Четыре ряда используют те же определения, что рисунок, без его подписей и фонов. Каждая пара прямоугольников находится в перенесённых группах, чтобы локальные начала были сопоставимы.

<svg xmlns="http://www.w3.org/2000/svg" width="560" height="420" viewBox="0 0 560 420">
<defs>
  <pattern id="fixed" patternUnits="userSpaceOnUse" width="40" height="40">
    <path d="M8 24 Q8 6 30 8 Q30 26 8 24Z" fill="#127f70"/>
  </pattern>
  <pattern id="tile" patternUnits="objectBoundingBox" width=".25" height=".5">
    <path d="M8 24 Q8 6 30 8 Q30 26 8 24Z" fill="#127f70"/>
  </pattern>
  <pattern id="both" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox" width=".25" height=".5">
    <path d="M.04 .30 Q.04 .08 .20 .10 Q.20 .33 .04 .30Z" fill="#127f70"/>
  </pattern>
  <pattern id="box" patternUnits="userSpaceOnUse" patternContentUnits="objectBoundingBox" width="40" height="40" viewBox="0 0 40 40">
    <path d="M8 24 Q8 6 30 8 Q30 26 8 24Z" fill="#127f70"/>
  </pattern>
</defs>
  <g transform="translate(20 20)"><rect width="120" height="80" fill="url(#fixed)"/></g>
  <g transform="translate(220 20)"><rect width="240" height="80" fill="url(#fixed)"/></g>
  <g transform="translate(20 120)"><rect width="120" height="80" fill="url(#tile)"/></g>
  <g transform="translate(220 120)"><rect width="240" height="80" fill="url(#tile)"/></g>
  <g transform="translate(20 220)"><rect width="120" height="80" fill="url(#both)"/></g>
  <g transform="translate(220 220)"><rect width="240" height="80" fill="url(#both)"/></g>
  <g transform="translate(20 320)"><rect width="120" height="80" fill="url(#box)"/></g>
  <g transform="translate(220 320)"><rect width="240" height="80" fill="url(#box)"/></g>
</svg>

Начните с узора fixed и измените только ширину второго прямоугольника. Затем проверьте tile и both перед изменением контура. Так выбор координат остаётся отдельным от самой графики. Для более общих изменений контуров и цветов используйте руководство по редактированию SVG.

Используйте viewBox, если у мотива свои координаты

viewBox узора позволяет листу сохранять привычную область рисования, а плитке — отдельный размер. Спецификация узоров SVG вписывает эту область рисования в плитку через viewBox и preserveAspectRatio.

В последнем ряду и плитка, и viewBox имеют размер 40 × 40, поэтому несовпадения пропорций нет. Если позже сделать плитку прямоугольной, значение по умолчанию preserveAspectRatio="xMidYMid meet" сохранит пропорции мотива и центрирует вписанную область рисования. preserveAspectRatio="none" допускает независимое горизонтальное и вертикальное масштабирование. Выбирайте его только при намеренном искажении.

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

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

Изменение размера прямоугольника отличается от масштабирования группы

userSpaceOnUse фиксирует шаг в пользовательских координатах, а не постоянных экранных пикселях. Преобразование может масштабировать эти координаты вместе с заливкой узором.

Мы также открыли два варианта с определением fixed выше. Первый прямоугольник имел width="240". Второй сохранял width="120" внутри группы с transform="translate(20 120) scale(2 1)". Оба занимали 240 экранных единиц в документе, но первый показал шесть столбцов листьев, а преобразованный — три горизонтально растянутых столбца.

Используйте это различие при диагностике адаптивной графики:

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

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

Подготовьте собственный мотив перед повторением

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

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

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

Перед передачей файла проверьте, что каждый fill="url(#...)" указывает на существующий уникальный ID узора, плитка имеет положительные размеры, а мотив помещается в нужную плитку. Узоры SVG обычно отсекают содержимое по границе плитки, поэтому лист, пересекающий край, требует продуманного повторения, а не предположения, что выход за границы будет виден.

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

Почему шаг изменился, а размер листа остался прежним? patternUnits управляет размерами плитки, а patternContentUnits — координатами графики. Плитка по ограничивающей рамке с содержимым в пользовательском пространстве по умолчанию может менять шаг без изменения размера листа.

Почему patternContentUnits будто ничего не делает? Проверьте наличие viewBox у узора. Если он есть, он определяет отображение координат содержимого, и patternContentUnits не действует.

Сохраняет ли userSpaceOnUse одинаковый размер узора на экране? Он сохраняет числовые размеры плитки в текущей пользовательской системе координат заполняемой фигуры. Масштабирование группы или изменение отображения координат корневого SVG в область просмотра всё ещё может менять размер узора на экране.

Источники

1. MDN — patternUnits — Определяет координаты геометрии плитки и ограничивающую рамку по умолчанию.
2. MDN — patternContentUnits — Определяет координаты содержимого и переопределение через viewBox.
3. W3C — SVG patterns — Объясняет вписывание плитки, поведение пропорций и отсечение узора.
4. W3C — SVG coordinate systems — Определяет преобразования пользовательских координат, лежащие в основе масштабирования групп.

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