SVG
преобразование
Поиск…
Синтаксис
- transform = " [functions] * "
- переводить (х [, у])
- вращаться (θ [х, у])
- Шкала (х [, у])
- skewX (θ)
- skewY (θ)
- Матрица (а, б, в, г, д, е)
Применение преобразований
Преобразования могут применяться к элементам путем добавления атрибута transform
:
<circle cx="0" cy="0" r="50" transform="translate(50,50)"/>
Или группам элементов, заключенных в теги <g>
:
<g transform="translate(50,50)">
<circle cx="0" cy="0" r="50"/>
<circle cx="0" cy="0" r="25" fill="white"/>
</g>
Дополнительные преобразования могут быть применены к одному и тому же элементу, добавив их в разделенные пространствами:
<circle cx="0" cy="0" r="50" transform="translate(50,50) scale(.5)"/>
Функции преобразования
Переведите
translate
перемещает графики по указанным векторам:
<circle cx="0" cy="0" r="50" transform="translate(50,50)"/>
Первое значение - это x-перевод, а второе - y. Если y опущено, по умолчанию будет 0.
Масштаб
scale
изменяет размеры элементов по заданным коэффициентам:
<circle cx="50" cy="50" r="25" transform="scale(.5,2)"/>
Как и translate
, аргументами являются x, то y. Однако в scale
, если y опущен, по умолчанию будет установлено значение x; другими словами, он масштабирует элемент без изменения соотношения сторон.
Поворот
rotate
поворачивает элементы по заданным углам.
<!-- <rect> used for this example because circles can't be rotated -->
<rect width="100" height="5" transform="rotate(90,50,50)"/>
Первое значение - это угол в градусах. Преобразование применяется по часовой стрелке. Остальные два значения представляют собой точку, которая должна быть повернута вокруг, по умолчанию - в начале координат.