patternTransform
Базовая поддержка Широко доступно
Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в разных версиях браузеров. Она доступна во всех браузерах с января 2020 года.
Атрибут patternTransform задаёт список определений преобразований, применяемых к плитке узора.
Этот атрибут можно использовать со следующими SVG-элементами:
Примеры
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<!-- Apply a transform on the tile -->
<pattern
id="p1"
width=".25"
height=".25"
patternTransform="rotate(20)
skewX(30)
scale(1 0.5)">
<circle cx="10" cy="10" r="10" />
</pattern>
<!-- Apply the transformed pattern tile -->
<rect x="10" y="10" width="80" height="80" fill="url(#p1)" />
</svg>
Элементы
Этот атрибут можно использовать с SVG-элементами, описанными в разделах ниже.
<pattern>
Для <pattern> атрибут patternTransform задаёт список определений преобразований, применяемых к плитке узора.
Примечание: Начиная с SVG2, также разрешено использовать свойство CSS transform. Однако на данный момент его поддержка реализована не очень хорошо. Для обеспечения обратной совместимости настоятельно рекомендуется продолжать использовать атрибут patternTransform.
| Значение | <transform-list> |
|---|---|
| Значение по умолчанию | Тождественное преобразование |
| Анимируемый | Да |
Функции преобразования
Подробнее об определении функций преобразования см. в описании атрибута transform.
Спецификации
Совместимость с браузерами
| Настольные | Мобильные | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari для iOS | Samsung Internet | WebView Android | WebView для iOS | |
patternTransform |
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/patternTransform
