SVG 变换属性

SVG（Scalable Vector Graphics，可缩放矢量图形）是一种用于描述二维矢量图形的XML语言。它允许开发人员创建高质量、可交互的图像和动画效果。

SVG中的变换属性允许开发人员在不改变SVG元素的实际形状的情况下，对其进行平移、旋转、缩放或错切。通过使用变换属性，您可以轻松地在SVG中实现各种视觉效果和动画。

变换属性

SVG提供了以下用于变换的属性：

1. 平移（Translate）

平移属性（translate）用于将元素在水平和垂直方向上进行移动。它接受两个参数，分别表示水平和垂直方向上的位移量。

示例代码：

<svg width="200" height="200">
  <circle cx="50" cy="50" r="20" fill="red" transform="translate(50, 50)" />
</svg>

2. 旋转（Rotate）

旋转属性（rotate）用于将元素围绕某个点进行旋转。它接受一个参数，表示旋转的角度。

示例代码：

<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="50" fill="blue" transform="rotate(45, 100, 75)" />
</svg>

3. 缩放（Scale）

缩放属性（scale）用于按比例调整元素的尺寸。它接受两个参数，分别表示水平和垂直方向上的缩放比例。

示例代码：

<svg width="200" height="200">
  <ellipse cx="100" cy="100" rx="50" ry="30" fill="green" transform="scale(2, 1.5)" />
</svg>

4. 错切（Skew）

错切属性（skew）用于在水平和垂直方向上拉伸元素。它接受两个参数，分别表示水平和垂直方向上的角度。

示例代码：

<svg width="200" height="200">
  <polygon points="100,50 150,150 50,150" fill="yellow" transform="skewX(30)" />
</svg>

组合变换

SVG允许将多个变换组合在一起，以实现更复杂的效果。您可以在一个transform属性中使用多个变换。

示例代码：

<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="50" fill="blue" transform="translate(50, 50) rotate(45) scale(2)" />
</svg>

在上述示例中，矩形元素首先进行平移，然后进行旋转，最后进行缩放。

总结

SVG的变换属性提供了丰富的功能，允许开发人员在SVG图形中实现各种效果和动画。通过平移、旋转、缩放和错切操作，您可以创建出令人惊叹的互动图形。试试在您自己的SVG项目中使用这些变换属性吧！

参考链接：MDN Web 文档：SVG 变换