patternContentUnits

Базовый уровень Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в разных версиях браузеров. Она доступна во всех браузерах с ⁨января 2020⁩ года.

Атрибут patternContentUnits указывает, какую систему координат следует использовать для содержимого элемента <pattern>.

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

Этот атрибут можно использовать со следующими элементами SVG:

<pattern>

Примеры

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!--
  A pattern tile that content coordinates and values are
  computed against the current coordinate user space.
  Note that the size of the tile is computed against
  the bounding box of the target element
  -->
  <pattern
    id="p1"
    width="20%"
    height="20%"
    patternContentUnits="userSpaceOnUse">
    <circle cx="10" cy="10" r="10" />
  </pattern>

  <!--
  A pattern tile that content coordinates and values are
  computed against the bounding box of the target element.
  Note that the size of the tile is also computed against
  the bounding box of the target element
  -->
  <pattern
    id="p2"
    width="20%"
    height="20%"
    patternContentUnits="objectBoundingBox">
    <circle cx=".1" cy=".1" r=".1" />
  </pattern>

  <!-- Left square with user space tiles -->
  <rect x="10" y="10" width="80" height="80" fill="url(#p1)" />

  <!-- Right square with bounding box tiles -->
  <rect x="110" y="10" width="80" height="80" fill="url(#p2)" />
</svg>

Элементы

Этот атрибут можно использовать с элементами SVG, описанными в следующих разделах.

`<pattern>`

Для элемента <pattern> атрибут patternContentUnits определяет систему координат, используемую для содержимого элемента.

Значение	`userSpaceOnUse` \| `objectBoundingBox`
Значение по умолчанию	`userSpaceOnUse`
Анимируемый	Да

userSpaceOnUse: Это значение указывает, что все координаты внутри элемента <pattern> относятся к пользовательской системе координат, определённой при создании фрагмента узора.
objectBoundingBox: Это значение указывает, что все координаты внутри элемента <pattern> задаются относительно ограничивающей рамки элемента, к которому применяется узор. Ограничивающую рамку можно считать эквивалентной ситуации, когда содержимое элемента <pattern> ограничено "0 0 1 1" viewBox для фрагмента узора шириной и высотой 100%.

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

Спецификация
Масштабируемая векторная графика (SVG) 2> # PatternElementPatternContentUnitsAttribute>

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

	Настольные устройства					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`patternContentUnits`	1	79	3	15	3	18	4	14	3	1.0	4.4	3

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