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

<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" style="background-color:#bff;">
  <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" style="background-color:#bff;">
  <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%. Если второе число опущено, оно предполагается равным первому.

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

См. конкретный пример на странице документации преобразования SVG по преобразованию SVG. Подробная информация об этом свойстве содержится в рекомендации SVG.

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

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

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

В отличие от 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>

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