Базовые преобразования

Теперь мы готовы начать искажать наши прекрасные изображения. Но сначала давайте официально познакомимся с элементом <g>. С его помощью можно задавать свойства целому набору элементов. Собственно, это его единственное назначение.

Пример

<svg width="30" height="10">
  <g fill="red">
    <rect x="0" y="0" width="10" height="10" />
    <rect x="20" y="0" width="10" height="10" />
  </g>
</svg>

Все приведённые ниже преобразования суммируются в атрибуте transform элемента. Преобразования можно объединять, перечисляя их через пробел.

Перемещение

Иногда элемент требуется переместить, даже если его можно расположить с помощью соответствующих атрибутов. Для этого предназначено преобразование translate().

<svg width="40" height="50">
  <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" />
</svg>

В результате будет отрисован прямоугольник, перемещённый в точку (30,40) вместо (0,0).

Если второе значение не указано, предполагается, что оно равно 0.

Поворот

Поворот элемента — довольно распространённая задача. Для этого используется преобразование rotate():

<svg width="31" height="31">
  <rect x="12" y="-10" width="20" height="20" transform="rotate(45)" />
</svg>

В этом примере показан квадрат, повёрнутый на 45 градусов. Значение для rotate() указывается в градусах.

Несколько преобразований

Преобразования можно легко объединять, разделяя их пробелами. Например, translate() и rotate() — распространённые преобразования.

<svg width="40" height="50">
  <rect
    x="0"
    y="0"
    width="10"
    height="10"
    transform="translate(30,40) rotate(45)" />
</svg>

В этом примере показан уже знакомый нам маленький квадрат, который теперь также повёрнут на 45 градусов.

Наклон

Чтобы превратить наш прямоугольник в ромб, можно использовать преобразования skewX() и skewY(). Каждое из них принимает угол, который определяет степень наклона элемента.

Масштабирование

scale() изменяет размер элемента. Оно принимает два числа: первое — коэффициент масштабирования по оси x, второе — по оси y. Коэффициенты задают отношение преобразованного размера к исходному. Например, 0.5 уменьшает размер на 50%. Если второе число не указано, предполагается, что оно равно первому.

Сложные преобразования с помощью matrix()

Все описанные выше преобразования можно выразить с помощью матрицы преобразования размером 2x3. Чтобы объединить несколько преобразований, можно напрямую задать результирующую матрицу с помощью преобразования matrix(a, b, c, d, e, f), которое переводит координаты из предыдущей системы координат в новую по следующим формулам:

См. конкретный пример в документации по преобразованиям SVG. Подробнее о преобразованиях читайте в руководстве по преобразованиям CSS.

Влияние на системы координат

При использовании преобразований внутри элемента, к которому они применяются, создаётся новая система координат. Это означает, что единицы измерения, указанные для элемента и его дочерних элементов, могут перестать соответствовать пикселям в соотношении 1:1: они также искажаются, наклоняются, перемещаются и масштабируются в соответствии с преобразованием.

<svg width="100" height="100">
  <g transform="scale(2)">
    <rect width="50" height="50" />
  </g>
</svg>

В результате прямоугольник в примере выше будет иметь размер 100x100px. Более интересные эффекты возникают, если использовать такие атрибуты, как userSpaceOnUse.

Встраивание SVG в SVG

В отличие от HTML, SVG позволяет беспрепятственно встраивать другие элементы svg. Таким образом, можно создавать новые системы координат, используя viewBox, width и height вложенного элемента svg.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100">
  <svg width="100" height="100" viewBox="0 0 50 50">
    <rect width="50" height="50" />
  </svg>
</svg>

Пример выше, по сути, даёт тот же эффект, что и предыдущий: прямоугольник будет вдвое больше заданного размера.