patternTransform

Атрибут patternTransform определяет список определений преобразований, которые применяются к плитке узора.

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

<pattern>

Пример

html

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

Узор

Для <pattern>, patternTransform определяет список определений преобразований, которые применяются к плитке узора.

Примечание: Начиная с SVG2, разрешено также использовать свойство CSS transform. Однако текущее состояние реализации не очень хорошее. Для обеспечения обратной совместимости настоятельно рекомендуется продолжать использовать атрибут patternTransform.

Значение	<transform-list>
Значение по умолчанию	Преобразование тождества
Анимируемо	Да

Функции преобразования

Чтобы узнать больше об определении функций преобразования, см. определение атрибута transform.

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

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

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`patternTransform`	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/patternTransform