Spec-Zone.ru › SVG

transform

Базовый уровень Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в разных версиях браузеров. Она доступна во всех браузерах с ⁨сентября 2015⁩ года.

  • Подробнее
  • Полная таблица совместимости
  • Оставить отзыв

Атрибут transform задаёт список преобразований, применяемых к элементу и его дочерним элементам.

Примечание: У атрибута представления transform также есть соответствующее свойство CSS: transform. Если заданы оба значения, приоритет имеет свойство CSS. Обратите внимание, что синтаксис свойства CSS и атрибута различается!

Элементы

В SVG 2 атрибут transform можно использовать для любого элемента, включая корневой элемент <svg>. Обратите внимание, что использование transform для корневого элемента <svg> — это относительно новая возможность; проверьте совместимость с браузерами. Использование transform для корневого элемента <svg> позволяет применять преобразования ко всему изображению SVG без дополнительных элементов-обёрток или обходных решений с CSS.

В SVG 1.1 атрибут transform разрешалось применять только к следующим 16 элементам: <a>, <circle>, <clipPath>, <defs>, <ellipse>, <foreignObject>, <g>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <switch>, <text> и <use>.

Кроме того, в качестве наследия SVG 1.1, <linearGradient> и <radialGradient> поддерживают атрибут gradientTransform, а <pattern> поддерживает атрибут patternTransform; оба ведут себя точно так же, как атрибут transform.

Значение

Значение <transform-list>
Значение по умолчанию none
Анимируемый Да

Примеры

>

Применение преобразования к одному элементу SVG

В этом примере мы применяем transform к одному элементу <g> внутри документа SVG:

<svg
  viewBox="-40 0 150 100"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <g
    fill="grey"
    transform="rotate(-10 50 100)
               translate(-36 45.5)
               skewX(40)
               scale(1 0.5)">
    <path
      id="heart"
      d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" />
  </g>

  <use href="#heart" fill="none" stroke="red" />
</svg>

Применение преобразования ко всему документу SVG

В этом примере мы применяем transform к корневому элементу <svg>, то есть преобразование применяется ко всему документу SVG:

<svg
  viewBox="-40 0 150 100"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  transform="rotate(-10 50 100)
               translate(-36 15.5)
               skewX(40)
               scale(1 0.5)">
  <g fill="grey">
    <path
      id="heart"
      d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" />
  </g>

  <use href="#heart" fill="none" stroke="red" />
</svg>

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

Атрибут transform <transform-list> позволяет использовать следующие функции преобразования.

Предупреждение: Согласно спецификации, также должна быть возможность использовать функции преобразования CSS. Однако совместимость не гарантируется.

Матрица

Функция преобразования matrix(<a> <b> <c> <d> <e> <f>) задаёт преобразование в виде матрицы преобразования из шести значений. matrix(a,b,c,d,e,f) эквивалентно применению матрицы преобразования:

(acebdf001)\begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix}

Она преобразует координаты из предыдущей системы координат в новую согласно следующим матричным равенствам:

(xnewCoordSysynewCoordSys1)=(acebdf001)(xprevCoordSysyprevCoordSys1)=(axprevCoordSys+cyprevCoordSys+ebxprevCoordSys+dyprevCoordSys+f1) \begin{pmatrix} x_{\mathrm{newCoordSys}} \\ y_{\mathrm{newCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x_{\mathrm{prevCoordSys}} \\ y_{\mathrm{prevCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{prevCoordSys}} + c y_{\mathrm{prevCoordSys}} + e \\ b x_{\mathrm{prevCoordSys}} + d y_{\mathrm{prevCoordSys}} + f \\ 1 \end{pmatrix}

Пример

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="30" height="20" fill="green" />

  <!--
  In the following example we are applying the matrix:
  [a c e]    [3 -1 30]
  [b d f] => [1  3 40]
  [0 0 1]    [0  0  1]

  which transform the rectangle as such:

  top left corner: oldX=10 oldY=10
  newX = a * oldX + c * oldY + e = 3 * 10 - 1 * 10 + 30 = 50
  newY = b * oldX + d * oldY + f = 1 * 10 + 3 * 10 + 40 = 80

  top right corner: oldX=40 oldY=10
  newX = a * oldX + c * oldY + e = 3 * 40 - 1 * 10 + 30 = 140
  newY = b * oldX + d * oldY + f = 1 * 40 + 3 * 10 + 40 = 110

  bottom left corner: oldX=10 oldY=30
  newX = a * oldX + c * oldY + e = 3 * 10 - 1 * 30 + 30 = 30
  newY = b * oldX + d * oldY + f = 1 * 10 + 3 * 30 + 40 = 140

  bottom right corner: oldX=40 oldY=30
  newX = a * oldX + c * oldY + e = 3 * 40 - 1 * 30 + 30 = 120
  newY = b * oldX + d * oldY + f = 1 * 40 + 3 * 30 + 40 = 170
  -->
  <rect
    x="10"
    y="10"
    width="30"
    height="20"
    fill="red"
    transform="matrix(3 1 -1 3 30 40)" />
</svg>

Перемещение

Функция преобразования translate(<x> [<y>]) перемещает объект на x и y. Если y не указано, предполагается значение 0.

Иными словами:

xNew = xOld + <x>
yNew = yOld + <y>

Пример

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- No translation -->
  <rect x="5" y="5" width="40" height="40" fill="green" />

  <!-- Horizontal translation -->
  <rect
    x="5"
    y="5"
    width="40"
    height="40"
    fill="blue"
    transform="translate(50)" />

  <!-- Vertical translation -->
  <rect
    x="5"
    y="5"
    width="40"
    height="40"
    fill="red"
    transform="translate(0 50)" />

  <!-- Both horizontal and vertical translation -->
  <rect
    x="5"
    y="5"
    width="40"
    height="40"
    fill="yellow"
    transform="translate(50 50)" />
</svg>

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

Функция преобразования scale(<x> [<y>]) задаёт масштабирование по x и y. Если y не указано, предполагается, что оно равно x.

Пример

<svg viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- uniform scale -->
  <circle cx="0" cy="0" r="10" fill="red" transform="scale(4)" />

  <!-- vertical scale -->
  <circle cx="0" cy="0" r="10" fill="yellow" transform="scale(1, 4)" />

  <!-- horizontal scale -->
  <circle cx="0" cy="0" r="10" fill="pink" transform="scale(4, 1)" />

  <!-- No scale -->
  <circle cx="0" cy="0" r="10" fill="black" />
</svg>

Поворот

Функция преобразования rotate(<a> [<x> <y>]) задаёт поворот на a градусов относительно заданной точки. Если необязательные параметры x и y не указаны, поворот выполняется относительно начала текущей пользовательской системы координат. Если необязательные параметры x и y указаны, поворот выполняется относительно точки (x, y).

Пример

<svg viewBox="-12 -2 34 14" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="10" height="10" />

  <!-- rotation is done around the point 0,0 -->
  <rect x="0" y="0" width="10" height="10" fill="red" transform="rotate(100)" />

  <!-- rotation is done around the point 10,10 -->
  <rect
    x="0"
    y="0"
    width="10"
    height="10"
    fill="green"
    transform="rotate(100, 10, 10)" />
</svg>

SkewX

Функция преобразования skewX(<a>) задаёт косое преобразование вдоль оси x на a градусов.

Пример

<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
  <rect x="-3" y="-3" width="6" height="6" />

  <rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewX(30)" />
</svg>

SkewY

Функция преобразования skewY(<a>) задаёт косое преобразование вдоль оси y на a градусов.

Пример

<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
  <rect x="-3" y="-3" width="6" height="6" />

  <rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewY(30)" />
</svg>

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

Спецификация
Модуль CSS Transforms, уровень 1>
# svg-transform>
Масштабируемая векторная графика (SVG) 2>
# TransformProperty>

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

Компьютеры Мобильные устройства
Chrome Edge Firefox Opera Safari Chrome Android Firefox для Android Opera Android Safari на iOS Samsung Internet WebView Android WebView на iOS
transform 361 1212 1649≤40–preview 231512.1–1510.5–15 93.1 3618 1649≤40 241412.1–1411–14 93.2 3.01.0 4.43 93.2
svg_root 137 137 Нет 121 Нет 137 Нет 90 Нет Нет 137 Нет

См. также

  • Свойство CSS transform

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/transform

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API