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>`
預設值	none
可動畫	是

變換函式

以下變換函式可由 transform 屬性 <transform-list> 使用

警告： 按照規範，您還應該能夠使用 CSS 變換函式。但是，相容性無法保證。

矩陣

matrix(<a> <b> <c> <d> <e> <f>) 變換函式以六個值的變換矩陣的形式指定一個變換。matrix(a,b,c,d,e,f) 等效於應用變換矩陣

\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 & 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" />

  <!--
  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>

示例

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

html

<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。

示例

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

html

<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) 進行。

示例

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" />

  <!-- 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>

沿 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>

規範

規範
CSS 變換模組級別 1 # svg-transform
可縮放向量圖形 (SVG) 2 # TransformProperty