Spec-Zone.ru › SVG

patternContentUnits

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

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

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

  • <pattern>

Пример

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

pattern

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

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

Это значение указывает, что все координаты внутри элемента <pattern> относятся к системе координат пользователя, как определено при создании плитки узора.

objectBoundingBox

Это значение указывает, что все координаты внутри элемента <pattern> относительны к области элемента, к которому применяется узор. Область можно рассматривать как если бы содержимое элемента <pattern> было привязано к "0 0 1 1" viewBox для плитки узора шириной и высотой 100%.

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

Спецификация
Scalable Vector Graphics (SVG) 2
# PatternElementPatternContentUnitsAttribute

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

Рабочие столы Мобильные устройства
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari на IOS Samsung Internet WebView Android
patternContentUnits 1 79 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/Attribute/patternContentUnits

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API