transform
=========

**`transform`** 属性定义应用于元素及其子元素的变换规则列表。

**备注：** 从 SVG2 开始，`transform` 为表现属性，这意味着它可以用作 CSS 属性。但是，请注意 CSS 属性和该属性的语法存在一些差异。有关在这种情况下使用的特定语法，请参见 CSS `transform` 属性的文档。

你可以在任何 SVG 元素上使用此属性。

示例
--
```

html,
body,
svg {
  height: 100%;
}
```



```html
<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 1.1 中，仅有 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>`** |
| 默认值 | *无* |
| 动画性 | 有 |

变换函数
----

`transform` 属性的 `<transform-list>` 可以使用以下所有的变换函数

**警告：** 根据规范，你还应该能够使用 CSS 变换函数。但是，这不能保证兼容性。

### 矩阵

`matrix(<a> <b> <c> <d> <e> <f>)` 变换函数以六个值的变换矩阵形式指定变换。`matrix(a,b,c,d,e,f)` 等同于应用变换矩阵：


(

a

c

e

b

d

f

0

0

1

)

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

它通过以下矩阵等式将坐标从先前的坐标系映射到新的坐标系：



(

x

newCoordSys



y

newCoordSys


1

)

=

(

a

c

e

b

d

f

0

0

1

)

(

x

prevCoordSys



y

prevCoordSys


1

)

=

(

a

x

prevCoordSys

+
c

y

prevCoordSys

+
e

b

x

prevCoordSys

+
d

y

prevCoordSys

+
f

1

)

 \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}

#### 示例
```

html,
body,
svg {
  height: 100%;
}
```



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

  <!--
 在下面的示例中，我们应用矩阵：
 [a c e] [3 -1 30]
 [b d f] => [1 3 40]
 [0 0 1] [0 0 1]

 矩形变换如下：

 左上角：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

 右上角：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

 左下角：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

 右下角：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>
```


#### 示例
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- 未经平移 -->
  <rect x="5" y="5" width="40" height="40" fill="green" />

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

  <!-- 垂直平移 -->
  <rect
 x="5"
 y="5"
 width="40"
 height="40"
 fill="red"
 transform="translate(0 50)" />

  <!-- 水平和垂直平移 -->
  <rect
 x="5"
 y="5"
 width="40"
 height="40"
 fill="yellow"
 transform="translate(50 50)" />
</svg>
```

### 缩放

`scale(<x> [<y>])` 变换函数指定一个按 `x` 和 `y` 进行缩放的操作。如果没有提供 `y`，那么假定其等同于 `x`。

#### 示例
```

html,
body,
svg {
  height: 100%;
}
```



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

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

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

  <!-- 无缩放 -->
  <circle cx="0" cy="0" r="10" fill="black" />
</svg>
```

### 旋转

`rotate(<a> [<x> <y>])` 变换函数指定一个围绕给定点旋转 `a` 度的操作。如果没有提供可选参数 `x` 和 `y`，那么默认绕当前用户坐标系的原点旋转。否则，就以 `(x,y)` 为原点进行旋转。

#### 示例
```

html,
body,
svg {
  height: 100%;
}
```



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

  <!-- 绕 0,0 点旋转 -->
  <rect x="0" y="0" width="10" height="10" fill="red" transform="rotate(100)" />

  <!-- 绕 10,10 点旋转 -->
  <rect
 x="0"
 y="0"
 width="10"
 height="10"
 fill="green"
 transform="rotate(100, 10, 10)" />
</svg>
```

### 倾斜 X

`skewX(<a>)` 变换函数指定沿 `x` 轴倾斜 `a` 度的倾斜变换。

#### 示例
```

html,
body,
svg {
  height: 100%;
}
```



```html
<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>
```

### 倾斜 Y

`skewY(<a>)` 变换函数指定了沿 `y` 轴倾斜 `a` 度的倾斜变换。

#### 示例
```

html,
body,
svg {
  height: 100%;
}
```



```html
<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>
```

规范
--

| Specification |
| --- |
| CSS Transforms Module Level 1 # svg-transform |
| Scalable Vector Graphics (SVG) 2 # TransformProperty |