CSS 用CSS旋转SVG（动画）

在本文中，我们将介绍如何使用CSS旋转SVG图像，并通过实例说明如何创建动画效果。

阅读更多：CSS 教程

什么是SVG？

SVG代表可缩放矢量图形（Scalable Vector Graphics）。它是一种基于XML的图像格式，用于描述二维图形和图形应用程序。与像素图像不同，SVG图像是矢量图像，这意味着它们以数学公式的形式描述图像，因此无论是放大还是缩小，图像都不会失真。

使用CSS旋转SVG

要旋转SVG图像，我们可以使用CSS的transform属性。transform属性允许我们对元素进行各种变换，包括旋转、缩放、倾斜等。

下面是一个简单的SVG图像，我们将使用CSS旋转它：

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="blue" />
</svg>

要在CSS中旋转该图像，我们可以添加以下样式：

svg {
  transform: rotate(45deg);
}

在上面的示例中，我们将SVG元素的transform属性设置为rotate(45deg)，它将图像顺时针旋转45度。

动画效果

除了静态旋转之外，我们也可以创建动画效果来使SVG图像旋转。

下面是一个示例，其中SVG图像以动画方式从水平旋转到垂直位置：

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="blue">
    <animateTransform
      attributeName="transform"
      attributeType="XML"
      type="rotate"
      from="0 50 50"
      to="90 50 50"
      dur="1s"
      repeatCount="indefinite"
    />
  </rect>
</svg>

在上面的示例中，我们使用了SVG的animateTransform元素来创建动画效果。该动画效果从初始位置（0 50 50）开始，到最终位置（90 50 50），并且重复无限次数（repeatCount=”indefinite”）。

动画参数解析

在上面的示例中，animateTransform元素带有几个参数，让我们对这些参数进行解析：

attributeName：表示要进行动画的属性。在我们的例子中，我们指定了transform属性。
attributeType：指定要进行动画的属性类型，通常为XML。
type：指定要应用于属性的动画变换类型，我们选择了rotate旋转。
from：指定起始位置。在我们的例子中，我们指定了起始位置的角度（0）以及旋转中心的坐标（50 50）。
to：指定最终位置。在我们的例子中，我们指定了最终位置的角度（90）以及旋转中心的坐标（50 50）。
dur：指定动画的持续时间，我们选择了1秒。
repeatCount：指定动画的重复次数，我们选择了无限次数（indefinite）。

通过调整这些参数，我们可以创建各种不同的动画效果。

CSS动画和关键帧

除了使用animateTransform元素创建动画之外，我们还可以使用CSS的@keyframes规则来定义动画的关键帧。

下面是一个示例，其中SVG图像使用CSS动画效果从水平旋转到垂直位置：

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="blue"></rect>
</svg>

为了创建动画效果，我们可以添加以下CSS样式：

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
  }
}

svg rect {
  animation: rotate 1s infinite;
}

在上面的示例中，我们首先使用@keyframes规则定义了一个名为rotate的动画，它有两个关键帧（0%和100%）。在起始关键帧（0%）中，我们将图像的旋转角度设置为0度，在最终关键帧（100%）中，我们将图像的旋转角度设置为90度。

然后，我们将动画应用于SVG图像的矩形元素，动画名称为rotate，持续时间为1秒，并且重复无限次数。

响应式设计中的SVG旋转

在使用SVG旋转时，我们还可以在响应式设计中应用它。这意味着SVG图像可以根据不同屏幕尺寸和设备旋转。

下面是一个示例，其中SVG图像在媒体查询中使用CSS旋转：

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="blue"></rect>
</svg>

为了在不同尺寸下旋转SVG图像，我们可以添加以下CSS样式：

@media (max-width: 600px) {
  svg rect {
    transform: rotate(45deg);
  }
}

@media (min-width: 601px) {
  svg rect {
    transform: rotate(90deg);
  }
}

在上面的示例中，我们使用媒体查询来分别定义小于600px和大于600px时的旋转样式。当屏幕宽度小于等于600px时，SVG图像将以45度旋转，当屏幕宽度大于600px时，SVG图像将以90度旋转。

通过使用响应式设计的旋转，我们可以根据不同的设备和屏幕尺寸来调整SVG图像的表现方式。