<pattern>

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

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

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

Атрибуты

height

Этот атрибут задаёт высоту плитки узора. Тип значения: <length>; Значение по умолчанию: 0; Анимируемый: да

href

Этот атрибут ссылается на шаблон узора, который задаёт значения по умолчанию для атрибутов <pattern>. Тип значения: <URL>; Значение по умолчанию: нет; Анимируемый: да

patternContentUnits

Этот атрибут задаёт систему координат для содержимого элемента <pattern>. Тип значения: userSpaceOnUse | objectBoundingBox; Значение по умолчанию: userSpaceOnUse; Анимируемый: да

Примечание: Этот атрибут не действует, если для элемента <pattern> указан атрибут viewBox.

patternTransform

Этот атрибут задаёт необязательное дополнительное преобразование из системы координат узора в целевую систему координат. Тип значения: <transform-list>; Значение по умолчанию: тождественное преобразование; Анимируемый: да

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 для фрагмента узора. Тип значения: <list-of-numbers>; Значение по умолчанию: нет; Анимируемый: да

width

Этот атрибут задаёт ширину плитки узора. Тип значения: <length>; Значение по умолчанию: 0; Анимируемый: да

x

Этот атрибут задаёт смещение плитки узора по координате x. Тип значения: <length>; Значение по умолчанию: 0; Анимируемый: да

xlink:href Устарело

Этот атрибут ссылается на шаблон узора, который задаёт значения по умолчанию для атрибутов <pattern>. Тип значения: <URL>; Значение по умолчанию: нет; Анимируемый: да

Примечание: В браузерах, реализующих href, если заданы и href, и xlink:href, xlink:href будет проигнорирован, а использоваться будет только href.

y

Этот атрибут задаёт смещение плитки узора по координате y. Тип значения: <length>; Значение по умолчанию: 0; Анимируемый: да

Интерфейс DOM

Этот элемент реализует интерфейс SVGPatternElement.

Примеры

<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>

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

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