<pattern>

Элемент <pattern> определяет графический объект, который может быть перерисован с повторяющимися интервалами координат x и y ("плиткой"), чтобы покрыть область.

Элемент <pattern> ссылается через атрибуты fill и/или stroke на других графических элементах, чтобы заполнить или обвести эти элементы указанным шаблоном.

Пример

html

<svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="star" 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: Этот атрибут определяет высоту плитки шаблона. Тип значения: <длина>|<процент>; Значение по умолчанию: 0; Анимируемый: да
href: Этот атрибут ссылается на шаблон-шаблон, который предоставляет значения по умолчанию для атрибутов <pattern>. Тип значения: <URL>; Значение по умолчанию: нет; Анимируемый: да
patternContentUnits: Этот атрибут определяет систему координат для содержимого <pattern>. Тип значения: userSpaceOnUse|objectBoundingBox; Значение по умолчанию: userSpaceOnUse; Анимируемый: да

Примечание: Этот атрибут не имеет эффекта, если атрибут viewBox указан в элементе <pattern>.
patternTransform: Этот атрибут содержит определение необязательного дополнительного преобразования из системы координат шаблона в целевую систему координат. Тип значения: <список преобразований>; Значение по умолчанию: нет; Анимируемый: да
patternUnits: Этот атрибут определяет систему координат для атрибутов x, y, width, и height. Тип значения: userSpaceOnUse|objectBoundingBox; Значение по умолчанию: objectBoundingBox; Анимируемый: да
preserveAspectRatio: Этот атрибут определяет, как фрагмент SVG должен быть деформирован, если он вставлен в контейнер с другим соотношением сторон. Тип значения: (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; Значение по умолчанию: xMidYMid meet; Анимируемый: да
viewBox: Этот атрибут определяет границу области просмотра SVG для фрагмента шаблона. Тип значения: <список чисел> ; Значение по умолчанию: нет; Анимируемый: да
width: Этот атрибут определяет ширину плитки шаблона. Тип значения: <длина>|<процент> ; Значение по умолчанию: 0; Анимируемый: да
x: Этот атрибут определяет смещение координаты x плитки шаблона. Тип значения: <длина>|<процент> ; Значение по умолчанию: 0; Анимируемый: да
xlink:href Устаревший: Этот атрибут ссылается на шаблон-шаблон, который предоставляет значения по умолчанию для атрибутов <pattern>. Тип значения: <URL>; Значение по умолчанию: нет; Анимируемый: да

Примечание: Для браузеров, поддерживающих href, если оба href и xlink:href установлены, xlink:href будет проигнорирован и будет использоваться только href.
y: Этот атрибут определяет смещение координаты y плитки шаблона. Тип значения: <длина>|<процент> ; Значение по умолчанию: 0; Анимируемый: да

Контекст использования

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

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

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

Спецификации

Спецификация
Scalable Vector Graphics (SVG) 2 # Шаблоны

Совместимость с браузерами

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`pattern`	1	12	3	15	3	18	4	14	3	1.0	4.4
`height`	1	12	3	15	3	18	4	14	3	1.0	4.4
`href`	50	79	3	37	12.1	50	4	37	12.2	5.0	50
`patternContentUnits`	1	79	3	15	3	18	4	14	3	1.0	4.4
`patternTransform`	1	79	3	15	3	18	4	14	3	1.0	4.4
`patternUnits`	1	79	3	15	3	18	4	14	3	1.0	4.4
`systemLanguage`	1	12	12	15	3	18	14	14	3	1.0	4.4
`width`	1	12	3	15	3	18	4	14	3	1.0	4.4
`x`	1	12	3	15	3	18	4	14	3	1.0	4.4
`xlink_href`	1	12	3	15	3	18	4	14	3	1.0	4.4
`y`	1	12	3	15	3	18	4	14	3	1.0	4.4

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/pattern