可以转换在SVG图像中创建的形状。例如，移动，缩放和旋转形状。这是显示垂直或者对角线文本的便捷方法。

转换实例

这是一个简单的示例：

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <rect x="50" y="50" height="110" width="110"
          style="stroke:#ff0000; fill: #ccccff"
          transform="translate(30) rotate(45 50 50)"
            >
    </rect>
    <text x="70" y="100"
          transform="translate(30) rotate(45 50 50)"
    >Hello World</text>
</svg>

注意 <rect>和 <text>元素的transform属性。 " transform"属性指定要应用于形状的变换。在此示例中，应用了平移和旋转。两者都将在本文后面解释。

哪些元素可以转换？

我们可以将变换应用于所有SVG形状。我们还可以将转换应用于 <g>元素，从而一次性有效地转换整个元素组。也可以变换渐变和填充图案。

转换函数

SVG提供四种转换函数：

• translate()
• rotate()
• scale()
• skew()
• matrix()

以下各节将对这些函数中的每一个进行更详细的说明。

实际上，转换函数不会自行转换SVG形状，而是会转换该形状的基础坐标系。因此，宽度为20的形状按比例放大2倍的形状，即使以两倍大小显示，在逻辑上仍具有20的宽度。

translate

" translate()"函数可移动形状。我们将x和y值传递给参数内部的translate()函数。这是一个例子：

translate(50,25)

本示例将形状沿x轴移动50个单位，并沿y轴移动25个单位。

这是一个示例，显示了两个位置相等且大小相等的形状，带有和不带有平移：

<rect x="20" y="20" width="50" height="50"
      style="fill: #cc3333"/>

<rect x="20" y="20" width="50" height="50"
      style="fill: #3333cc"
      transform="translate(75,25)" />

请注意，与第一个(红色)形状相比，第二个(蓝色)形状沿x轴移动了75个单位，沿y轴移动了25个单位。

rotate

函数rotate()绕点0,0旋转形状。这是显示一个矩形(轮廓)和旋转15度后的相等矩形(实心)的示例：

<rect x="20" y="20" width="40" height="40"
      style="stroke: #3333cc; fill:none;"
        />

<rect x="20" y="20" width="40" height="40"
      style="fill: #3333cc"
      transform="rotate(15)"
        />

如果要绕0,0以外的其他点旋转，则将该点的x和y坐标传递给transform函数。这是一个示例，显示了一个非旋转的矩形(轮廓)和一个相等的矩形(实心)围绕其中心旋转15度：

<rect x="20" y="20" width="40" height="40"
      style="stroke: #3333cc; fill:none;"
        />

<rect x="20" y="20" width="40" height="40"
      style="fill: #3333cc"
      transform="rotate(15, 40, 40)"
        />

所有旋转都是顺时针旋转，并且度数从0到360。如果要逆时针旋转，请将负数度数传递给rotate()函数。

scale

函数scale()可以按比例放大或者缩小形状。 scale()函数可缩放形状尺寸及其位置坐标。因此，以20的比例缩放高度为20且高度为30的矩形的比例为2的矩形将出现在宽度为40且高度为60的20,20处。

scale()函数还可以缩放形状的笔触宽度。

这是一个示例，显示了一个位于10,0处，宽度为20且高度为20的矩形(蓝色)，以及一个等比例的矩形(黑色)，其缩放比例为2：

<rect x="10" y="10" width="20" height="30"
      style="stroke: #3333cc; fill:none;" />

<rect x="10" y="10" width="20" height="30"
      style="stroke: #000000; fill:none;"
      transform="scale(2)" />

注意矩形的位置和大小是如何缩放的。

我们可以在x轴和y轴上按其他因子缩放形状。为此，我们可以向scale()函数提供x-scale和y-scale参数，如下所示：

scale(2,3);

本示例将沿x轴将形状缩放2倍，沿y轴将形状缩放3倍。这是一个例子：

<rect x="10" y="10" width="20" height="30"
      style="stroke: #3333cc; fill:none;" />

<rect x="10" y="10" width="20" height="30"
      style="stroke: #000000; fill:none;"
      transform="scale(2,3)" />

请注意，缩放后的矩形(黑色)的笔划宽度也是如何缩放的，并且在x轴和y轴上的缩放比例不同。

缩放为镜像函数

通过沿x轴或者y轴按-1缩放比例，可以将scale()函数用作镜像函数。完成后，我们必须先在x或者y方向上移动(平移)该形状，否则镜像的形状将出现在SVG画布的外部。

这是一个例子：

<path d="M20,20 l20,20 l0,20 l-20,20 Z"
      style="stroke: #3333cc; fill:none;" />

<path d="M20,20 l20,20 l0,20 l-20,20 Z"
      style="stroke: #000000; fill:none;"
      transform="translate(100, 0) scale(-1, 1) " />

这是在x = 100处绘制的线条的结果图像(因为矩形在x方向上平移了100)。

蓝色是原始形状。黑色形状是平移的缩放比例形状。

Skew

skewX()和skewY()函数使x轴和y轴倾斜。实际上，这些函数会根据以度为单位指定的某个角度来倾斜给定的轴。

这是显示带有不同skewX()值的矩形的一些示例。

<rect x="10" y="10" width="20" height="30"
      style="stroke: #3333cc; fill:none;" />

<rect x="50" y="10" width="20" height="30"
      style="stroke: #000000; fill:none;"
      transform="skewX(10)" />
<rect x="100" y="10" width="20" height="30"
      style="stroke: #000000; fill:none;"
      transform="skewX(45)" />
<rect x="150" y="10" width="20" height="30"
      style="stroke: #000000; fill:none;"
      transform="skewX(60)" />

如我们所见，skewX()函数使垂直线看起来像是按给定角度旋转了。因此，" skewY()"函数使水平线看起来像是旋转了给定角度。这里有一些例子：

<rect x="10" y="10" width="20" height="30"
      style="stroke: #3333cc; fill:none;" />

<rect x="50" y="10" width="20" height="30"
      style="stroke: #000000; fill:none;"
      transform="skewY(60)" />
<rect x="100" y="10" width="20" height="30"
      style="stroke: #000000; fill:none;"
      transform="skewY(45)" />
<rect x="150" y="10" width="20" height="30"
      style="stroke: #000000; fill:none;"
      transform="skewY(10)" />

矩阵

也可以将转换表示为矩阵。矩阵如下所示：

a  c  e
b  d  f
0  0  1

由于只能指定前6个值，因此只能为矩阵转换函数提供6个值。这是一个例子：

transform="matrix(a,b,c,d,e,f)"

其他变换函数可以表示为矩阵。这里有些例子：

Translate

1  0  tx
0  1  ty
0  0   1

matrix(1,0,0,1,tx,ty)

Rotate

cos(a)   -sin(a)  0
sin(a)    cos(a)  0
     0        0   1

matrix( cos(a), sin(a),-sin(a),cos(a),0,0 )

注意：cos(a)和sin(a)的值在插入矩阵之前必须预先计算。参数" a"是旋转角度。

Scale

sx  0  0
 0 sy  0
 0  0  1

matrix(sx,0,0,sy,0,0)

沿x轴的偏斜变换可以写为：

Skew

1  tan(a)  0
0       1  0
0       0  1

matrix(1,0,tan(a),1,0,0)

在将tan(a)值插入到matrix()函数之前，必须对其进行预先计算。

沿y轴的偏斜变换可表示为：

Skew

1       0  0
tan(a)  1  0
0       0  1

matrix(1,tan(a),0,1,0,0)

这是一个模仿简单转换函数的SVG矩阵转换示例：

<rect x="20" y="20" width="50" height="50"
      style="fill: #cc3333"/>

<rect x="20" y="20" width="50" height="50"
      style="fill: #3333cc"
      transform="matrix(1,0,0,1,100,20)"
        />

请注意，与左侧(红色)矩形相比，右侧矩形(蓝色)如何转换。

结合转换

可以组合转换。我们可以通过在transform属性中放置多个转换函数来实现。

这是一个示例，该示例首先平移(移动)然后旋转矩形。该示例显示了在应用任何变换之前和之后(黑色)的重新排列(蓝色)。

<rect x="50" y="10" width="20" height="30"
      style="stroke: #3333cc; fill:none;"
        />
<rect x="50" y="10" width="20" height="30"
      style="stroke: #000000; fill:none;"
      transform="translate(50,0) rotate(30)" />

转换顺序很重要

转换的顺序很重要。在" transform"属性内指定变换函数的顺序是它们应用于形状的顺序。

下面的示例说明了先平移然后旋转，再先旋转然后平移形状之间的区别：

<rect x="50" y="10" width="20" height="30"
      style="stroke: #000000; stroke-width: 2px; fill:none;"
        />
<rect x="50" y="10" width="20" height="30"
      style="stroke: #3333cc; stroke-width: 2px;  fill:none;"
      transform="translate(100,0) rotate(45)" />
<rect x="50" y="10" width="20" height="30"
      style="stroke: #cc3333; stroke-width: 2px;  fill:none;"
      transform="rotate(45) translate(100,0)" />

黑色矩形未应用任何转换。首先平移蓝色矩形，然后旋转。首先旋转红色矩形，然后平移。