transform
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年9月.
transform 属性定义应用于元素及其子元素的变换规则列表。
备注：
从 SVG2 开始，transform 为表现属性，这意味着它可以用作 CSS 属性。但是，请注意 CSS 属性和该属性的语法存在一些差异。有关在这种情况下使用的特定语法，请参见 CSS transform 属性的文档。
你可以在任何 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 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) 等同于应用变换矩阵：
它通过以下矩阵等式将坐标从先前的坐标系映射到新的坐标系：
示例
<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>
示例
<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。
示例
<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) 为原点进行旋转。
示例
<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 度的倾斜变换。
示例
<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 度的倾斜变换。
示例
<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 |