Преобразование узора SVG: вращайте заливку, не контур

Чтобы повернуть узор SVG внутри неподвижной фигуры, задайте patternTransform="rotate(...)" элементу pattern. Не меняйте преобразование самой фигуры. Чтобы сместить положение повторяющейся графики, используйте перенос у того же узора.

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

Выберите элемент, который должен двигаться

Текущий справочник patternTransform описывает список преобразований, применяемых к ячейке узора. Определение узоров SVG2 объясняет системы координат ячейки и преобразование заливки.

В этом примере мотив — небольшой асимметричный угловой знак, повторяемый внутри ячейки в 24 единицы. Фигура, получающая заливку, — другой контур: асимметричный значок с прямоугольным отверстием. Разделение ролей проясняет выбор правки.

Мы используем атрибут SVG напрямую. Примечание MDN о реализации CSS transform не обещает, что свойство CSS с именем pattern-transform сработает в вашей целевой среде.

Поворачивайте заливку внутри очертания

Откройте полный стартовый пример поворота заливки

Сохраните этот SVG как pattern-emblem.svg и откройте в браузере. Он самодостаточен, без внешнего изображения или библиотеки. Узор повёрнут на 30 градусов вокруг исходной точки (100,80); у принимающей группы нет преобразования.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">
  <defs>
    <pattern id="motif" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" width="24" height="24" patternTransform="rotate(30 100 80)">
      <rect width="24" height="24" fill="#f4f0e4"/>
      <path d="M3 4 H15 V8 H9 V17 H3 Z" fill="#c15a38"/>
    </pattern>
  </defs>
  <g>
    <path id="emblem" d="M30 25 H130 L170 65 L140 135 H30 Z M65 60 H110 V100 H65 Z" fill="url(#motif)" fill-rule="evenodd"/>
  </g>
</svg>

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

В этом исходнике явно заданы и patternUnits, и patternContentUnits. Справочник patternUnits определяет систему координат ячейки. Наше руководство по единицам узора подробно описывает размеры ячеек и координаты мотива. Здесь мы фиксируем их для изоляции преобразования; это не рецепт бесшовного повтора.

Сравните поворот, перенос и геометрический контроль

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

1. Для исходной заливки удалите patternTransform у узора.
2. Для смещённой заливки замените его на patternTransform="translate(7 5)".
3. Для контроля всего объекта удалите преобразование узора и добавьте transform="rotate(20 100 80)" принимающему элементу g.

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

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

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

Проверяйте геометрию и пиксели отдельно

Мы отрисовали четыре исходных варианта в Chrome при 200×160 и 400×320 CSS-пикселях. Отношение пикселей устройства в браузере было 2. Каждый исходник также декодировался и рисовался на холсте с размерами буфера, совпадающими с заявленным размером теста, что позволяло читать пиксели независимо от снимка экрана.

Каждый файл содержит одну строку d эмблемы и тот же контур мотива: два элемента path и ни одного image. Хеши полных файлов различаются, потому что различаются преобразования. Локальный прямоугольник геометрии эмблемы — (30,25,140,110) во всех случаях.

Один локальный прямоугольник упустил бы изменение всего объекта. Для этой многоугольной эмблемы мы также преобразовали пять внешних вершин через фактическую матрицу браузера и измерили отображаемый охват. Таблица нормализует большую область просмотра обратно к исходным единицам:

Нормализованные охваты совпали в обоих проверенных размерах. Контроль объекта сохраняет ту же строку d, но отображаемая геометрия меняется. Поэтому равенство исходных данных — полезное доказательство сохранённого построения контура, но недостаточное доказательство неподвижности видимого очертания.

У вариантов только с заливкой полные пиксельные буферы холста отличались от исходного в каждом размере. В исходной точке (45,45) оригинальный образец был фоном ячейки (244,240,228), а образец повёрнутой заливки — терракотовым мотивом (193,90,56), оба с альфа-каналом 255. Перенос не изменил именно этот образец, хотя общий буфер отличался. Одна точка выборки может пропустить сдвиг заливки.

В исходной точке (85,80) отверстие имело нулевой альфа-канал во всех восьми случаях. Границы полностью непрозрачных пикселей также не менялись для трёх вертикальных вариантов в каждом размере; эти пороговые пиксельные границы — не то же измерение, что точные охваты вершин контура. Наблюдения ограничены нашим созданным исходником и браузером, а не являются сертификатом совместимости средств отрисовки.

Проверьте сохранённый результат в целевой среде до передачи

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

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

Если собственный мотив или эмблема существуют только в PNG или JPG, а нужны редактируемые контуры, подготовьте SVG с PerfectVector, проверьте очертание и отверстие и сохраните чистый мастер. Затем постройте повтор и выберите преобразование заливки в SVG-коде. Векторизация готовит графику; она не проектирует повтор, не выбирает фазу и не гарантирует обработку узоров целевой средой. Чистые существующие контуры могут сразу перейти к правке узора; руководство по векторизации объясняет, когда полезно преобразование растра.

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

Меняет ли patternTransform данные контура эмблемы? В этом примере он преобразует заливку узора. Строка d эмблемы остаётся неизменной. Проверяйте также преобразования принимающей группы и предков: отображаемая геометрия может двигаться без изменения d.

Можно ли сместить узор без поворота? Да. Вариант translate(7 5) сдвигает положение заливки, сохраняя ориентацию мотива. При проверке эффекта фиксируйте размеры ячейки и принимающую геометрию.

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

Являются ли повторяющиеся мотивы отдельными редактируемыми контурами? В исходнике один контур мотива в сервере окрашивания и один принимающий контур эмблемы. Видимые повторы — не отдельно созданные элементы path; раскройте и проверьте их отдельно, если целевой среде нужна такая форма.

Источники

1. MDN — patternTransform — Списки преобразований узора и примечание о реализации атрибута.
2. W3C — Узоры SVG2 — Системы координат ячеек и преобразование заливки.
3. MDN — fill-rule — Чётно-нечётное отверстие в принимающем контуре.
4. MDN — transform — Поворот отображаемой геометрии группы.
5. MDN — patternUnits — Явная система координат ячейки, зафиксированная в этом сравнении.