CSS 使用CSS旋转SVG路径

在本文中，我们将介绍如何使用CSS旋转SVG路径。SVG（可缩放矢量图形）是一种基于XML语法的图像格式，可以使用CSS来对其进行样式化和动画效果的控制。而路径（path）是SVG中最常用的元素之一，用于定义形状和曲线。

阅读更多：CSS 教程

什么是SVG路径

SVG路径是通过一系列的命令来描述一个形状或曲线的组合。这些命令包括移动到指定的位置（M命令）、水平或垂直线条（H、V命令）、直线（L命令）、二次贝塞尔曲线（Q命令）和圆弧（A命令）等。路径的起点和终点通过闭合命令（Z命令）连接起来，形成一个封闭的形状。

下面是一个简单的SVG路径示例：

<svg width="100" height="100">
  <path d="M 10 10 L 90 10 L 90 90 L 10 90 Z" fill="red"/>
</svg>

在上述示例中，我们使用路径命令定义了一个矩形，起点是(10, 10)，依次连接到(90, 10)、(90, 90)、(10, 90)，最后通过闭合命令将形状封闭。

使用CSS旋转SVG路径

要旋转SVG路径，我们可以使用CSS的transform属性和rotate函数。transform属性可以对元素进行平移、旋转、缩放和倾斜等变换操作。

下面是一个将SVG路径旋转45度的示例：

<svg width="100" height="100">
  <path d="M 10 10 L 90 10 L 90 90 L 10 90 Z" fill="red" style="transform: rotate(45deg)"/>
</svg>

在上述示例中，我们通过在路径元素的style属性中添加transform: rotate(45deg)，将路径旋转了45度。

同样，我们也可以使用transform-origin属性来调整旋转的中心点。例如，下面的示例将路径以其左上角为中心点旋转45度：

<svg width="100" height="100">
  <path d="M 10 10 L 90 10 L 90 90 L 10 90 Z" fill="red" style="transform: rotate(45deg); transform-origin: top left"/>
</svg>

CSS动画旋转SVG路径

除了静态的旋转，我们还可以使用CSS动画来实现在一段时间内逐渐旋转SVG路径的效果。CSS动画可以通过关键帧（@keyframes）和动画属性（animation）来控制。

下面是一个使用CSS动画实现旋转效果的示例：

<svg width="100" height="100">
  <path id="path" d="M 10 10 L 90 10 L 90 90 L 10 90 Z" fill="red"/>
</svg>

<style>
  @keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  #path {
    animation: rotate 3s infinite linear;
  }
</style>

在上述示例中，我们定义了一个名为rotate的关键帧，从0%到100%的过程中，将路径旋转了360度。然后，我们将该动画应用到路径元素上，并设置为无限循环播放，每3秒钟完成一次旋转。