释放创造力，探索多彩SVG世界：巧用变换操作打造动感视觉

2023-11-02 12:18:32

掌握了SVG图形的基本绘制技巧后，我们迫不及待地想要让这些图形动起来，赋予它们生命力。就像CSS可以对HTML元素进行变换一样，SVG图形也可以进行移动、旋转、缩放等转换操作。这些变换操作不仅能为静态图形增添动感，还能帮助我们创建交互式动画。让我们一起探索SVG图形的变换世界，解锁更多创意可能！

SVG变换基础

SVG图形的变换操作由<transform>元素实现，<transform>元素可以包含一组变换指令，这些指令将应用于其子元素。<transform>元素的属性包括：

translate()：平移图形。
rotate()：旋转图形。
scale()：缩放图形。
skewX()：沿X轴倾斜图形。
skewY()：沿Y轴倾斜图形。

这些变换指令可以组合使用，以创建更复杂的变换效果。例如，我们可以将平移和旋转结合起来，实现图形沿弧线移动的效果。

位移操作

位移操作使用translate()函数实现，translate()函数接受两个参数，分别表示沿X轴和Y轴的位移量。正值表示向右或向下移动，负值表示向左或向上移动。

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="red" />
  <transform translate(20, 30) />
  <rect x="10" y="10" width="80" height="80" fill="blue" />
</svg>

在这个例子中，第一个矩形没有进行任何变换，第二个矩形则沿X轴移动了20个单位，沿Y轴移动了30个单位。

旋转操作

旋转操作使用rotate()函数实现，rotate()函数接受一个参数，表示旋转的角度。正值表示顺时针旋转，负值表示逆时针旋转。

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="red" />
  <transform rotate(45) />
  <rect x="10" y="10" width="80" height="80" fill="blue" />
</svg>

在这个例子中，第一个矩形没有进行任何变换，第二个矩形则以其中心为轴旋转了45度。

缩放操作

缩放操作使用scale()函数实现，scale()函数接受两个参数，分别表示沿X轴和Y轴的缩放比例。正值表示放大，负值表示缩小。

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="red" />
  <transform scale(2, 3) />
  <rect x="10" y="10" width="80" height="80" fill="blue" />
</svg>

在这个例子中，第一个矩形没有进行任何变换，第二个矩形则沿X轴放大了2倍，沿Y轴放大了3倍。

变换矩阵

上述变换操作都可以通过变换矩阵来实现。变换矩阵是一个3x3的矩阵，它可以表示一个二维图形的缩放、旋转、平移和倾斜。变换矩阵的具体形式如下：

| a  c  e |
| b  d  f |
| 0  0  1 |

其中，a、b、c、d、e、f是变换矩阵的元素。这些元素决定了变换矩阵的具体含义。例如，a和d决定了图形的缩放比例，c和b决定了图形的倾斜角度，e和f决定了图形的平移量。

使用变换矩阵可以实现更复杂的变换效果。例如，我们可以使用变换矩阵将图形沿椭圆轨迹移动，或者将图形绕着另一个图形旋转。

SVG动画

SVG图形的变换操作可以用来创建动画。我们可以通过改变<transform>元素的属性值来实现图形的动态变化。例如，我们可以使用translate()函数来实现图形的平滑移动，或者使用rotate()函数来实现图形的旋转动画。

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="red" />
  <animateTransform attributeName="transform"
                   type="translate"
                   from="0,0"
                   to="100,100"
                   dur="1s"
                   repeatCount="indefinite" />
</svg>