Паттерн служит для заполнения повторяющимся узором свободного пространства внутри фигур, текста, а также может выполнять роль фона веб страниц. На этом сайте я чаще всего использую именно этот паттерн в виде шахматной доски, в качестве фона иллюстраций, так как каждый квадратик паттерна равен 10х10 пикселей, что позволяет легко ориентироваться в размерах при просмотре примеров.
Графика паттерна задается внутри тегов
<pattern> … </pattern > в котейнере <defs> файла SVG с помощью элементов: line, polyline, path, rect, circle, ellipse. Для создания одного паттерна могут быть использованы одна или комбинация из нескольких фигур, линий, путей.
В паттерне “шахматная доска” использованы два одинаковых цветных квадрата со смещением второго квадрата относительно первого вниз и вправо на 10px. Смотри код ниже.
Паттерну присваивается уникальное имя с помощью индефикатора id=”…”. Созданный таким образом паттерн может быть использован далее один или несколько раз, в одном или нескольких файлах SVG.

В 20-ой строке кода выше, паттерном заполняется прямоугольник, занимающий на 100% ширину и высоту svg холста, указаных в 4-ой строке – (150х150). Заполнение паттерном идёт слева направо и сверху вниз. В литературе к термину паттерн еще добавляют слово tiled – плитка и это образно-точное добавление паттерну. Так как, если при укладке плитки на фиксированую ширину и высоту она не размещается целое число раз, то последняя плитка обрезается.

На Рис.1 pattern “шахматная доска”, см. листинг выше, обрезан на половину по ширине (было width=”20″ стало width=”10″) . В паттерне теперь помещается узор только из двух вертикальных квадратиков – синего и белого. Так как холст SVG заполняется слева-направо получились горизонтальные полоски.
На Рис.2 паттерн обрезан по высоте. В узоре паттерна остались два разноцветных горизонтальных квадрата, которые будут чередоваться при заполнении первой строки холста SVG. В результате заполнения следующих строк получатся вертикальные полоски.

Атрибуты паттерна

Более полная спецификация атрибутов pattern

Атрибут ‘patternUnits’

‘patternUnits’ принимает два значения: “userSpaceOnUse | objectBoundingBox”.
Значение patternUnits по умолчанию – ‘objectBoundingBox’.
В кратце, отличие этих двух параметров состоит в том, что при patternUnits=”userSpaceOnUse” фигура на холсте SVG полностью заполняется плитками паттерна. Если последняя плитка не входит целиком по длине и/или по ширине, то она обрезается см. Рис.3.

При patternUnits=”objectBoundingBox” атрибуты ‘x’, ‘y’, ‘width’, ‘height’ паттерна задаются дробными числами или процентами, что иногда бывает удобно для того чтобы уложить плитку паттерна целое число раз, как по ширине, так и по высоте. Например: width =”0.5″ или width=”50%” означает, что ширина одной плитки паттерна состовляет половину от ширины фигуры, которую он заполняет. Следовательно по ширине уместится ровно 2 плитки паттерна см. листинг и рисунок ниже.

patternUnits=”objectBoundingBox”

При ширине и высоте плитки паттерна равным 25% уместится ровно по 4 плитки по ширине и высоте, заполняемого прямоугольника. Пока габаритные размеры узора будут входить полностью или частично в рамки паттерна, узор будет полностью или частично отображаться на плитках паттерна.

Атрибут ‘patternContentUnits’

‘patternContentUnits’ принимает два значения: “objectBoundingBox | userSpaceOnUse”.
Значение patternContentUnits по умолчанию – ‘userSpaceOnUse’.
При patternContentUnits=’objectBoundingBox’ задаются дробными числами или процентами параметры фигур узора паттерна.

Плитка паттерна имеет ширину – 0.5 х 200 = 100px; Высоту – 1.0 х 200 = 200px; Следовательно в прямоугольнике с размерами – 200 x 200 px уложатся 2 плитки паттерна.
Узор паттерна формирует окружность с центром cx = 0.25 x 200 = 50px и радиусом окружности равным r = 0.25 x 200 = 50px;

Атрибут ‘‘patternTransform’’

“<transform-list>“содержит список трансформаций системы координат паттерна относительно системы координат SVG viewport
например: перемещение, вращение, наклон, масштабирование.
Возьмем пример из начала статьи – паттерн шахматная доска и с помощью атрибута ‘patternTransform’ повернем его на 30 градусов.

Вложенные паттерны ( Nested pattern )

В секции <defs> формируются два паттерна: внешний outerPattern и внутренний innerPattern. Внешний паттерн заполняет фигуру, в нашем случае прямоугольник. В свою очередь внешний паттерн заполняется вместо цвета внутренним паттерном.

⇚ SVG marker element SVG path element ⇛