<pattern>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..

* Some parts of this feature may have varying levels of support.

Элемент<pattern> определяет графический объект, который может быть перерисован с повторяющимися координатамиx иy («мозаичным»), чтобы покрыть область.На ссылку<pattern> ссылаются атрибутыfill и / илиstroke на другихграфических элементах , чтобы заполнить или обвести эти элементы указанным шаблоном.

Пример

html,body,svg {  height: 100%;}

html

<svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg">  <defs>    <pattern viewBox="0,0,10,10" width="10%" height="10%">      <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2" />    </pattern>  </defs>  <circle cx="50" cy="50" r="50" fill="url(#star)" />  <circle    cx="180"    cy="50"    r="40"    fill="none"    stroke-width="20"    stroke="url(#star)" /></svg>

Атрибуты

height: Этот атрибут определяет высоту плитки шаблона.Value type:<length>|<percentage>;Default value:0;Animatable:yes
href: Этот атрибут по умолчанию ссылается на пример шаблона для<pattern>Value type:<URL>;Default value:none;Animatable:yes
patternContentUnits: Этот атрибут определяет систему координат содержимого<pattern>.Value type:userSpaceOnUse|objectBoundingBox;Default value:userSpaceOnUse;Animatable:yes
Примечание:Этот атрибут не действует, если в элементе<pattern> указан атрибутviewBox.
patternTransform: Этот атрибут содержит определение необязательного дополнительного преобразования из системы координат шаблона в целевую систему координат.Value type:<transform-list>;Default value:none;Animatable:yes
patternUnits: Этот атрибут определяет систему координат для атрибутовx,y,width иheight.Value type:userSpaceOnUse|objectBoundingBox;Default value:objectBoundingBox;Animatable:yes
preserveAspectRatio: Этот атрибут определяет, как фрагмент svg должен быть деформирован, если он встроен в контейнер с другим соотношением сторон.Value type: (none|xMinYMin|xMidYMin|xMaxYMin|xMinYMid|xMidYMid|xMaxYMid|xMinYMax|xMidYMax|xMaxYMax) (meet|slice)? ;Default value:xMidYMid meet;Animatable:yes
viewBox: Этот атрибут определяет границы области просмотра SVG для фрагмента шаблона.Value type:<list-of-numbers> ;Default value: none;Animatable:yes
width: Этот атрибут определяет ширину плитки шаблона.Value type:<length>|<percentage> ;Default value:0;Animatable:yes
x: Этот атрибут определяет смещение координаты x мозаичного изображения.Value type:<length>|<percentage> ;Default value:0;Animatable:yes
xlink:hrefУстарело: Этот атрибут ссылается на пример шаблона, предоставляющего значения по умолчанию для атрибутов<pattern>.Value type:<URL>;Default value:none;Animatable:yes
Примечание:Для браузеров, реализующихhref, если заданы какhref, так иxlink:href,xlink:href будет игнорироваться, используя толькоhref.
y: Этот атрибут определяет смещение координат y мозаичного элемента.Value type:<length>|<percentage> ;Default value:0;Animatable:yes

Нотации

Категории Элемент-контейнер

Разрешённый контент Любое количество следующих элементов, в любом порядке:
Элементы анимации
Элементы описания
Элементы градиента
Элементы фигуры
Структурные элементы
<a>,<clipPath>,<filter>,<foreignObject>,<image>,<marker>,<mask>,<script>,<style>,<switch>,<text>,<view>

Категории	Элемент-контейнер
Разрешённый контент	Любое количество следующих элементов, в любом порядке: Элементы анимации Элементы описания Элементы градиента Элементы фигуры Структурные элементы `<a>`,`<clipPath>`,`<filter>`,`<foreignObject>`,`<image>`,`<marker>`,`<mask>`,`<script>`,`<style>`,`<switch>`,`<text>`,`<view>`