patternUnits
Атрибут patternUnits указывает, какую систему координат использовать для свойств геометрии элемента <pattern>.
Вы можете использовать этот атрибут со следующими элементами SVG:
Пример
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- All geometry properties are relative to the current user space --> <pattern id="p1" x="12.5" y="12.5" width="25" height="25" patternUnits="userSpaceOnUse"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- All geometry properties are relative to the target bounding box --> <pattern id="p2" x=".125" y=".125" width=".25" height=".25" patternUnits="objectBoundingBox"> <circle cx="10" cy="10" r="10" /> </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>, patternUnits определяет систему координат, используемую для свойств геометрии (x, y, width и height ) элемента.
| Значение |
userSpaceOnUse | objectBoundingBox
|
|---|---|
| Значение по умолчанию | objectBoundingBox |
| Анимируемо | Да |
userSpaceOnUse-
Это значение указывает, что все координаты для свойств геометрии относятся к системе координат пользователя, как определено при применении узора.
objectBoundingBox-
Это значение указывает, что все координаты для свойств геометрии представляют собой дроби или проценты от области отрисовки элемента, к которому применяется узор. Область отрисовки можно рассматривать так, как если бы содержимое элемента
<pattern>было привязано к "0 0 1 1"viewBox.
Спецификации
Совместимость с браузерами
| Рабочий стол | Мобильные устройства | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на IOS | Samsung Internet | WebView Android | |
patternUnits |
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/patternUnits