transform（变换）

transform

transform属性定义了应用于元素和元素的子元素的变换定义列表。变换列表中的项目用空格和/或逗号分隔，并且从右向左应用。

Usage语境

变换定义的类型

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>

一般转型

以下是了解一般转换的基本示例。我们考虑变换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>