> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

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

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

Source: https://perfectvector.com/ru/blog/svg-pattern-transform

Language: ru
Author: Irene Kim
Published: 2026-10-05T08:00:00+09:00
Updated: 2026-10-05T08:00:00+09:00

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

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

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

Текущий [справочник patternTransform](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/patternTransform) описывает список преобразований, применяемых к ячейке узора. [Определение узоров SVG2](https://www.w3.org/TR/SVG2/pservers.html#Patterns) объясняет системы координат ячейки и преобразование заливки.

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

| Нужное изменение                        | Место атрибута             | Что проверить                               |
| --------------------------------------- | -------------------------- | ------------------------------------------- |
| Повернуть поле повторяющихся мотивов    | patternTransform у pattern | Направление мотива и решётку ячеек          |
| Сместить положение мотива внутри значка | patternTransform у pattern | Фазу у очертания и отверстия                |
| Повернуть весь значок                   | transform у его группы     | Показываемые очертание, отверстие и границы |

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

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

![Концептуальное сравнение вертикальной полой эмблемы с повторяющимися геометрическими мотивами до и после поворота заливки внутри неподвижного очертания](https://perfectvector.com/blog/svg-pattern-transform/fixed-outline-paint.webp)

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

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

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

```svg
<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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill-rule) о правиле на основе пересечений. Отверстие принадлежит контуру эмблемы, поэтому поворот повторяющейся заливки не поворачивает отверстие.

В этом исходнике явно заданы и `patternUnits`, и `patternContentUnits`. [Справочник patternUnits](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/patternUnits) определяет систему координат ячейки. Наше [руководство по единицам узора](https://perfectvector.com/ru/blog/svg-pattern-units) подробно описывает размеры ячеек и координаты мотива. Здесь мы фиксируем их для изоляции преобразования; это не рецепт бесшовного повтора.

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

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

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

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

Для контроля объекта [справочник атрибута transform](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/transform) описывает поворот вокруг выбранной точки. Это преобразование меняет отображение геометрии группы. Обычная заливка узором перемещается с ней; пользовательские единицы узора не делают заливку этого примера глобально неподвижной.

При диагностике результата начните с одного преобразования. Если позже объедините поворот, перенос и масштабирование, проверьте их порядок в [руководстве по порядку преобразований SVG](https://perfectvector.com/ru/blog/svg-transform-order). Сочетание преобразований добавляет отдельный вопрос координат, которого избегает это контролируемое сравнение.

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

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

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

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

| Вариант          | Преобразование узора | Преобразование группы | Отображаемый внешний охват x,y,ширина,высота |
| ---------------- | -------------------- | --------------------- | -------------------------------------------- |
| Исходный         | нет                  | нет                   | 30,25,140,110                                |
| Поворот заливки  | rotate(30 100 80)    | нет                   | 30,25,140,110                                |
| Смещение заливки | translate(7 5)       | нет                   | 30,25,140,110                                |
| Поворот объекта  | нет                  | rotate(20 100 80)     | примерно 15.41,4.38,155.50,140.99            |

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

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

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

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

Храните оригинальную эмблему как ориентир геометрии, а эффект заливки — в отдельной копии. Повторяющийся сервер окрашивания не превращает каждый видимый мотив в независимую фигуру, которую последующее режущее оборудование или редактор сможет выделить. Если там нужна раскрытая геометрия, готовьте и проверяйте раскрытие отдельно. [Руководство по редактированию SVG](https://perfectvector.com/ru/blog/how-to-edit-an-svg) описывает более широкие изменения исходника.

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

Если собственный мотив или эмблема существуют только в PNG или JPG, а нужны редактируемые контуры, [подготовьте SVG с PerfectVector](https://perfectvector.com/ru/image-to-vector), проверьте очертание и отверстие и сохраните чистый мастер. Затем постройте повтор и выберите преобразование заливки в SVG-коде. Векторизация готовит графику; она не проектирует повтор, не выбирает фазу и не гарантирует обработку узоров целевой средой. Чистые существующие контуры могут сразу перейти к правке узора; [руководство по векторизации](https://perfectvector.com/ru/blog/what-is-image-vectorization) объясняет, когда полезно преобразование растра.

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

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

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

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

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

## Источники

1. [MDN — patternTransform](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/patternTransform) — Списки преобразований узора и примечание о реализации атрибута.
2. [W3C — Узоры SVG2](https://www.w3.org/TR/SVG2/pservers.html#Patterns) — Системы координат ячеек и преобразование заливки.
3. [MDN — fill-rule](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill-rule) — Чётно-нечётное отверстие в принимающем контуре.
4. [MDN — transform](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/transform) — Поворот отображаемой геометрии группы.
5. [MDN — patternUnits](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/patternUnits) — Явная система координат ячейки, зафиксированная в этом сравнении.

## Explore

- [Read the HTML article](https://perfectvector.com/ru/blog/svg-pattern-transform)
- [SVG.js: импорт графики, правка контура и экспорт SVG](https://perfectvector.com/ru/blog/svgjs-import-export-artwork.md)
- [Относительные команды контуров SVG: текущая точка](https://perfectvector.com/ru/blog/svg-relative-path-commands.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)