<pattern>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

Элемент <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

Этот атрибут определяет высоту плитки шаблона. 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>

Характеристики

Specification
Scalable Vector Graphics (SVG) 2
# PatternElement

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
pattern
height
href
patternContentUnits
patternTransform
patternUnits
systemLanguage
width
x
xlink:href
Deprecated
y

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Deprecated. Not for use in new websites.