示例
<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() 变换。
<svg width="40" height="50">
<rect x="0" y="0" width="10" height="10" transform="translate(30,40)" />
</svg>
该示例将渲染一个矩形，其平移点为 (30,40)，而不是 (0,0)。
如果未给出第二个值，则假定其为 0。
旋转
旋转元素是一项相当常见的任务。为此，请使用 rotate() 变换。
<svg width="31" height="31">
<rect x="12" y="-10" width="20" height="20" transform="rotate(45)" />
</svg>
此示例显示了一个旋转 45 度的正方形。rotate() 的值以度为单位。
多个变换
变换可以很容易地通过空格分隔来连接。例如，translate() 和 rotate() 是常用的变换。
<svg width="40" height="50">
<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) 变换直接设置结果矩阵，该变换通过以下方式将坐标从前一个坐标系统映射到新坐标系统：
请参阅 SVG 变换文档中的具体示例。要了解有关变换的更多信息，请查看 CSS 变换指南。
对坐标系统的影响
在使用变换时，您会在应用变换的元素内部建立一个新的坐标系统。这意味着，您为元素及其子元素指定的单位可能不遵循 1:1 像素映射，而是根据变换进行扭曲、倾斜、平移和缩放。
<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 来创建新的坐标系统。
<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>
上面示例的效果与上面的示例基本相同，即矩形的大小将是指定的两倍。