transform（变换）
transform属性定义了应用于元素和元素的子元素的变换定义列表。变换列表中的项目用空格和/或逗号分隔，并且从右向左应用。
Usage语境
分类 | None |
|---|---|
值 | <transform-list> |
动画 | Yes |
规范性文件 | SVG 1.1 (2nd Edition) |
变换定义的类型
matrix(<a> <b> <c> <d> <e> <f>)This transform definition specifies a transformation in the form of a transformation matrix of six values. matrix(a,b,c,d,e,f) is equivalent to applying the transformation matrix (acebdf001)\begin{pmatrix} a & c & e \ b & d & f \ 0 & 0 & 1 \end{pmatrix} which maps coordinates from a new coordinate system into a previous coordinate system by the following matrix equalities: (xprevCoordSysyprevCoordSys1)=(acebdf001)(xnewCoordSysynewCoordSys1)=(axnewCoordSys+cynewCoordSys+ebxnewCoordSys+dynewCoordSys+f1) \begin{pmatrix} x_{\mathrm{prevCoordSys}} \ y_{\mathrm{prevCoordSys}} \ 1 \end{pmatrix} = \begin{pmatrix} a & c & e \ b & d & f \ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x_{\mathrm{newCoordSys}} \ y_{\mathrm{newCoordSys}} \ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{newCoordSys}} + c y_{\mathrm{newCoordSys}} + e \ b x_{\mathrm{newCoordSys}} + d y_{\mathrm{newCoordSys}} + f \ 1 \end{pmatrix} translate(<x> <y>)This transform definition specifies a translation by x and y. This is equivalent to matrix(1 0 0 1 x y). If y is not provided, it is assumed to be zero.scale(<x> <y>)This transform definition specifies a scale operation by x and y. This is equivalent to matrix(x 0 0 y 0 0). If y is not provided, it is assumed to be equal to x.rotate(<a> <x> <y>)This transform definition specifies a rotation by a degrees about a given point. If optional parameters x and y are not supplied, the rotate is about the origin of the current user coordinate system. The operation corresponds to the matrix (cosa-sina0sinacosa0001)\begin{pmatrix} \cos a & -\sin a & 0 \ \sin a & \cos a & 0 \ 0 & 0 & 1 \end{pmatrix} If optional parameters x and y are supplied, the rotate is about the point (x, y). The operation represents the equivalent of the following transform definitions list: translate(<x>, <y>) rotate(<a>) translate(-<x>, -<y>).skewX(<a>)This transform definition specifies a skew transformation along the x axis by a degrees. The operation corresponds to the matrix (1tan(a)0010001)\begin{pmatrix} 1 & \tan(a) & 0 \ 0 & 1 & 0 \ 0 & 0 & 1 \end{pmatrix}skewY(<a>)This transform definition specifies a skew transformation along the y axis by a degrees. The operation corresponds to the matrix (100tan(a)10001) \begin{pmatrix} 1 & 0 & 0 \ \tan(a) & 1 & 0 \ 0 & 0 & 1 \end{pmatrix}
示例
旋转和翻译SVG元素
在这个简单的例子中，我们使用transform SVG属性旋转和平移（移动）一个SVG元素。变换之前的原始元素显示为低透明度。
CSS（可选的）：
text {
font: 1em sans-serif;
}SVG:
<svg width="180" height="200"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- This is the element before translation and rotation are applied -->
<rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2"fill-opacity=0.2 stroke-opacity=0.2></rect>
<!-- Now we add a text element and apply rotate and translate to both -->
<rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2" transform="translate(30) rotate(45 50 50)"></rect>
<text x="60" y="105" transform="translate(30) rotate(45 50 50)"> Hello Moz! </text>
</svg>Screenshot | Live sample |
|---|---|
? | ? |
一般转型
以下是了解一般转换的基本示例。我们考虑变换matrix(1,2,3,4,5,6)并在新坐标系中画一条从（10,20）到（30,40）的粗蓝线。使用原始坐标系将具有相同端点的细白线绘制在其上方。
<svg width="160" height="230" xmlns="http://www.w3.org/2000/svg">
? <g transform="matrix(1,2,3,4,5,6)">
??? <!-- New coordinate system (thick blue line)
???????? x1 = 10 | x2 = 30
???????? y1 = 20 | y2 = 40
????? -->
??? <line x1="10" y1="20" x2="30" y2="40" style="stroke-width: 10px; stroke: blue;"/>
? </g>
? <!-- Previous coordinate system (thin white line)
?????? x1 = 1 * 10 + 3 * 20 + 5 = 75? | x2 = 1 * 30 + 3 * 40 + 5 = 155
?????? y1 = 2 * 10 + 4 * 20 + 6 = 106 | y2 = 2 * 30 + 4 * 40 + 6 = 226
??? -->
? <line x1="75" y1="106" x2="155" y2="226" style="stroke-width: 1px; stroke: white;"/>
</svg>同一位置的文本插图围绕不同点旋转
以下SVG中的所有文本示例在页面（x="200" y="0"）上具有相同的位置，并且全部以45°旋转。唯一的区别是锚定旋转的点。
<svg viewBox="-20 -20 820 420" xmlns="http://www.w3.org/2000/svg" width="800" height="400">
<text x="200" y="0">...unrotated text; same starting position as examples below (in all cases: x="200" y="0")</text>
<circle cx="200" cy="0" r="2" style="stroke: green; stroke-width: 1; fill: green;" />
<text x="200" y="0" transform="rotate(45 200,0)" style="fill: green;" >...(1) rotate(45 200,0) (rotated 45° around a point at 200,0)</text>
<circle cx="100" cy="0" r="2" style="stroke: blue; stroke-width: 1; fill: blue;" />
<path d="M 200,0 A 100,100 0 0,1 0,0" style="stroke: blue; stroke-width: 1; fill: transparent;" />
<text x="200" y="0" transform="rotate(45 100,0)" style="fill: blue;">...(2) rotate(45 100,0) (rotated 45° around a point at 100,0)</text>
<circle cx="0" cy="0" r="2" style="stroke: red; stroke-width: 1; fill: red;" />
<path d="M 200,0 A 200,200 0 0,1 0,200" style="stroke: red; stroke-width: 1; fill: transparent;" />
<text x="200" y="0" transform="rotate(45 0,0)" style="fill: red;" >...(3) rotate(45 0,0) (rotated 45° around a point at 0,0)</text>
</svg>要素
以下元素可以使用该transform属性：
<a><clipPath><defs><foreignObject><g><switch><use><svg>(SVG 2 onwards)- Graphics elements ?
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
