transform

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 2015 年 9 月以来,该特性已在各大浏览器中可用。

transform 属性定义了一系列应用于元素及其子元素的变换定义。

注意: 作为一个表示属性,transform 也有一个对应的 CSS 属性:transform。当同时指定两者时,CSS 属性具有优先权。请注意,CSS 属性和此属性在语法上存在一些差异!

元素

在 SVG 2 中,您可以将 transform 属性应用于任何元素,包括 <svg> 根元素。请注意,在 <svg> 根元素上使用 transform 是一项较新的功能,您应检查 浏览器兼容性 以获取支持。在 <svg> 根元素上使用 transform 对于将变换应用于整个 SVG 图像非常方便,无需额外的包装元素或 CSS 解决方法。

在 SVG 1.1 中,只有以下 16 个元素允许应用 transform<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
可动画的

示例

将变换应用于单个 SVG 元素

在此示例中,我们将 transform 应用于 SVG 文档中的单个 <g> 元素。

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 文档

在此示例中,我们将 transform 应用于 <svg> 根元素,这意味着变换将应用于整个 SVG 文档。

html
<svg
  viewBox="-40 0 150 100"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  transform="rotate(-10 50 100)
               translate(-36 15.5)
               skewX(40)
               scale(1 0.5)">
  <g fill="grey">
    <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>

变换函数

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

警告: 根据规范,您应该也可以使用 CSS 变换函数。但是,兼容性不能保证。

Matrix

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

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

该矩阵通过以下矩阵等式将坐标从之前的坐标系映射到新的坐标系。

(xnewCoordSysynewCoordSys1)=(acebdf001)(xprevCoordSysyprevCoordSys1)=(axprevCoordSys+cyprevCoordSys+ebxprevCoordSys+dyprevCoordSys+f1)\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
<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

translate(<x> [<y>]) 变换函数将对象按 xy 移动。如果未提供 y,则假定其值为 0

换句话说

xNew = xOld + <x>
yNew = yOld + <y>

示例

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

scale(<x> [<y>]) 变换函数指定一个按 xy 进行缩放的操作。如果未提供 y,则假定其等于 x

示例

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

rotate(<a> [<x> <y>]) 变换函数指定一个绕给定点旋转 a 度的操作。如果未提供可选参数 xy,则旋转是绕当前用户坐标系的 원点进行的。如果提供了可选参数 xy,则旋转是绕点 (x, y) 进行的。

示例

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>

SkewX

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

示例

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>

SkewY

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

示例

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
Scalable Vector Graphics (SVG) 2
# TransformProperty

浏览器兼容性

另见