Эта статья нуждается в техническом обзоре. Как вы можете помочь.
В атрибуте transform
перечисляются описания преобразований, применяемых как к самому элементу, так и к его последователям. Описания в списке разделяются пробелами или запятыми и применяются в порядке справа налево.
Контекст использования
Категории | Нет |
---|---|
Значение | <transform-list> |
Анимация | Да |
Нормативная база | SVG 1.1 (2nd Edition) |
Типы преобразований
- matrix(<a> <b> <c> <d> <e> <f>)
- Преобразование с использованием матрицы из шести элементов. Преобразование
matrix(a,b,c,d,e,f)
равнозначно применению матрицы которая отображает координаты из новой системы координат в предыдущую систему координат используя следующие формулы: - translate(<x> [<y>])
- Перенос по осям
x
иy
. Равнозначноmatrix(1 0 0 1 x y)
. Если значениеy
опущено, оно принимается равным нулю. - scale(<x> [<y>])
- Масштабирование по осям
x
иy
. Равнозначноmatrix(x 0 0 y 0 0)
. Если значениеy
опущено, оно принимается равнымx
. - rotate(<a> [<x> <y>])
- Поворот на
a
градусов вокруг указанной точки. Если необязательные параметрыx
иy
опущены, поворот будет осуществляться вокруг начала координат текущей пользовательской системы координат. Операция соответствует матрице Если необязательные параметрыx
иy
присутствуют, поворот будет осуществляться вокруг точки(x, y)
. Операция равнозначна следующему списку преобразований:translate(<x>, <y>) rotate(<a>) translate(-<x>, -<y>)
. - skewX(<a>)
- Наклон относительно оси
x
наa
градусов. Операция соответствует матрице - skewY(<a>)
- Наклон относительно оси
y
наa
градусов. Операция соответствует матрице
Примеры
Поворот и перенос SVG-элемента
В этом простом примере мы поворачиваем и переносим SVG-элемент, используя атрибут transform
. Первоначальный элемент до преобразования показан полупрозрачным.
CSS (необязательный):
text { font: 1em sans-serif; }
SVG:
<svg width="180" height="200" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink"> <!-- Это элемент до применения переноса и поворота --> <rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2" fill-opacity=0.2 stroke-opacity=0.2></rect> <!-- Здесь мы добавим текстовый элемент, повернем и перенесем оба элемента --> <rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2" transform="translate(30) rotate(45 50 50)"></rect> <text x="60" y="105" transform="translate(30) rotate(45 50 50)"> Hello Moz! </text> </svg>
Screenshot | Live sample |
---|---|
Общее преобразование
Вот простой пример, чтобы понять общее преобразование. Мы рассмотрим матрицу преобразования matrix(1,2,3,4,5,6)
и нарисуем жирную синюю линию из точки (10,20) в точку (30,40) в новой системе координат. Тонкая белая линия, проходящая через те же точки, нарисована над нею, используя первоначальную систему координат.
<svg width="160" height="230" xmlns="https://www.w3.org/2000/svg"> <g transform="matrix(1,2,3,4,5,6)"> <!-- Новая система координат (жирная синяя линия) x1 = 10 | x2 = 30 y1 = 20 | y2 = 40 --> <line x1="10" y1="20" x2="30" y2="40" style="stroke-width: 10px; stroke: blue;"/> </g> <!-- Предыдущая система координат (тонкая белая линия) x1 = 1 * 10 + 3 * 20 + 5 = 75 | x2 = 1 * 30 + 3 * 40 + 5 = 155 y1 = 2 * 10 + 4 * 20 + 6 = 106 | y2 = 2 * 30 + 4 * 40 + 6 = 226 --> <line x1="75" y1="106" x2="155" y2="226" style="stroke-width: 1px; stroke: white;"/> </svg>
Элементы
Следующие элементы могут использовать атрибут transform
: