SVG pattern element

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

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

Обрезаются так же фигуры, рисующие узор паттерна, если они выходят за габаритные размеры паттерна. См. 10-ую строку листинга выше, атрибуты width и height. Другими словами: виден только тот узор, который поместится на плитку.

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

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

Атрибут Описание
x, y задается смещение верхнего левого угла паттерна относительно начала координат viewport
‘width’, ‘height’ ширина и высота прямоугольной области, в которой располагается паттерн
‘patternUnits’ Принимает два значения: “userSpaceOnUse | objectBoundingBox” – по умолчанию.
‘patternContentUnits’ “objectBoundingBox | userSpaceOnUse – по умолчанию. “
‘patternTransform’ <transform-list>“содержит список трансформаций системы координат паттерна относительно системы координат SVG viewport
например: перемещение, вращение, наклон, масштабирование
‘xlink:href’ xlink:href = “<iri>

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

Атрибут ‘patternUnits’

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

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

patternUnits="objectBoundingBox" Рис.4

patternUnits=”objectBoundingBox”

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

 

Для полного заполнения фигур узорами паттерна, расположенных на холсте SVG, всегда применяйте patternUnits=”userSpaceOnUse”

Атрибут ‘patternContentUnits’

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

patternContentUnits-ink Плитка паттерна имеет ширину – 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 градусов.

pattern-rotate

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

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

 
patternNested

⇚ SVG marker element SVG path element ⇛

SVG pattern element: 4 комментария

  1. Привет. Столкнулся со следующей проблемой:
    Хочу заполнить SVG-контейнер повторяющийся текстурой (png).

    Размер изображения: 100x100px;
    Размер контейнера: 100% «резиновый»;

    Какие значения атрибутов “width” и “height” тега “pattern” нужно указать, чтобы картинка замостила контейнер, не изменяясь при этом в размерах (100x100px)?

  2. Паттерн должен быть исключительно в формате svg. Картинки png в паттерне будут проигнорированы. Если перекодировать картинку png в svg например с помощью Inkscape, то она получится тяжелой и непригодной для масштабирования, как вы планировали. Выход один, – нарисовать самому нужное изображение в формате SVG, либо найти другое подходящее изображение svg и использовать его в качестве паттерена, как показано в этой статье

  3. png изображения в качестве паттерна не игнорируются, а нормально воспринимаются браузерами:

    Но у меня тот же вопрос, как при этом сделать, что бы изображение паттерна не изменялось в размере, а было 177px на 200px и повторялось по обоим осям?

  4. Разобрался как это сделать:

    –pattern id=”img5″ width=”100%” height=”100%” patternContentUnits=”objectBoundingBox”–
    image xmlns:xlink=”http://www.w3.org/1999/xlink” xlink:href=”palette/4.png” x=”0″ y=”0″ width=”1″ height=”1″ preserveAspectRatio=”none”></image–
    –/pattern–

    Тут подробный ответ: https://stackoverflow.com/questions/22883994/crop-to-fit-an-svg-pattern

Добавить комментарий