基本变换

现在我们准备开始扭曲美丽的图像。但首先，让我们正式介绍一下 <g> 元素。有了这个助手，你可以为一组完整的元素分配属性。实际上，这就是它的唯一目的。

示例

html
<svg width="30" height="10">
  <g fill="red">
    <rect x="0" y="0" width="10" height="10" />
    <rect x="20" y="0" width="10" height="10" />
  </g>
</svg>

所有以下转换都汇总在元素的 transform 属性中。转换可以通过将它们连接起来，用空格隔开来进行链式操作。

翻译

可能需要移动一个元素，即使你可以使用相应的属性对其进行定位。为此，translate() 转换已经准备就绪。

html
<svg width="40" height="50" style="background-color:#bff;">
  <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" />
</svg>

此示例将呈现一个矩形，将其从 (0,0) 翻译到点 (30,40)。

如果没有给出第二个值，则假定为 0。

旋转

旋转元素是一项非常常见的任务。为此，请使用 rotate() 转换

html
<svg width="31" height="31">
  <rect x="12" y="-10" width="20" height="20" transform="rotate(45)" />
</svg>

此示例显示了一个旋转 45 度的正方形。rotate() 的值为度数。

多个变换

转换可以通过简单的空格分隔来进行连接。例如，translate() 和 rotate() 是常用的转换。

html
<svg width="40" height="50" style="background-color:#bff;">
  <rect
    x="0"
    y="0"
    width="10"
    height="10"
    transform="translate(30,40) rotate(45)" />
</svg>

此示例再次显示了上面显示的小正方形，这次它还旋转了 45 度。

倾斜

要从矩形中创建菱形，可以使用 skewX() 和 skewY() 转换。每个转换都接受一个角度，该角度决定元素将倾斜的程度。

缩放

scale() 改变元素的大小。它接受两个数字，第一个是 x 比例因子，第二个是 y 比例因子。这些因子作为转换后的尺寸与原始尺寸的比率来取。例如，0.5 收缩 50%。如果省略第二个数字，则假定它等于第一个。

使用 matrix() 进行复杂变换

所有上述转换都可以用 2x3 变换矩阵来表示。要组合多个转换，可以使用 matrix(a, b, c, d, e, f) 转换直接设置结果矩阵，该转换通过以下方式将坐标从以前的坐标系映射到新的坐标系

{ x newCoordSys = a x prevCoordSys + c y prevCoordSys + e y newCoordSys = b x prevCoordSys + d y prevCoordSys + f \left\{ \begin{matrix} x_{\mathrm{prevCoordSys}} = a x_{\mathrm{newCoordSys}} + c y_{\mathrm{newCoordSys}} + e \\ y_{\mathrm{prevCoordSys}} = b x_{\mathrm{newCoordSys}} + d y_{\mathrm{newCoordSys}} + f \end{matrix} \right.

请参见 SVG 转换文档中的具体示例。有关此属性的详细信息，请参见 SVG 建议。

对坐标系的影响

使用转换时，你将在应用转换的元素内部建立一个新的坐标系。这意味着你为元素及其子元素指定的单位可能不遵循 1:1 像素映射，而是根据转换进行扭曲、倾斜、平移和缩放。

html
<svg width="100" height="100">
  <g transform="scale(2)">
    <rect width="50" height="50" />
  </g>
</svg>

上面示例中生成的矩形将为 100x100px。当你依赖 userSpaceOnUse 等属性时，会产生更有趣的效果。

在 SVG 中嵌入 SVG

与 HTML 相比，SVG 允许你无缝地嵌入其他 svg 元素。这样你也可以通过利用内部 svg 元素的 viewBox、width 和 height 来创建新的坐标系。

html
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100">
  <svg width="100" height="100" viewBox="0 0 50 50">
    <rect width="50" height="50" />
  </svg>
</svg>

上面的示例基本上与上面的示例具有相同的效果，即矩形将是指定大小的两倍。