SVG 转换

可缩放矢量图形 (SVG) 提供了几种用于转换单个项目或 SVG 项目集合形状的选项。 SVG 的变换支持倾斜、旋转、缩放和平移。

让我们在本章中了解SVG 变换的概念，如下所述。

引言

可缩放矢量图形表示一个名为 transform 的新属性，该属性支持变换。

一些可能的值指定如下

平移： 此值包含两个基本选项。第一个选项，即 tx，表示沿 x 轴平移。第二个选项是 ty，表示沿 y 轴平移。例如，translate (30 30)。

旋转： 此值包含三个重要选项。第一个选项是 angle，它表示旋转角度。第二个和第三个选项是 cx 和 cy，它们表示 x 轴和 y 轴内的旋转中心。当未描述 cy 和 cx 时，它将成为最新坐标系原点的默认值。例如，rotate (60)。

缩放： 缩放值包含两个选项。第一个是 sx，它说明了 x 轴的任何缩放因子。第二个是 sy，它说明了 y 轴的缩放因子。在此值中，sy 因子保留 sx 值，并且当未指定时，它是可选的，例如 scale (10)。

倾斜： 它包含一个单独的选项。倾斜角度表示 SkewX 与 x 轴的角度，以及 SkewY 与 y 轴的角度，例如 skewx (20)。

让我们来看一些例子。

示例：1

使用 SVG 矩形进行平移

输出

• 也可以使用空格作为分隔符来描述任何单个 SVG 项目的两个或多个变换。当指定两个或多个值时，可以在指定的顺序内依次使用变换。

示例：2

输出

• 变换也可以用于 SVG 项目组。它允许转换 SVG 中说明的任何复杂图形，如下所述

例如：3

输出

最小插图

它尝试使用变换来旋转和缩放图像，以创建任何 SVG 图像。

让我们通过下面的说明来理解

示例

输出

使用 D3.js 进行变换

我们将在下面提到的插图中学习如何使用 D3.js 应用变换

示例

输出

变换库

D3.js 提供了一个独立的库来维护变换，而无需手动创建任何变换属性。它提供了管理每种变换类型的方法。一些技术是 rotate()、scale()、translate() 和 transform()。我们可以使用以下脚本将 d3-transform 添加到我们的网页中