如何使用 CSS 创建 SVG 动画

已发表: 2023-02-16

Web 动画如今风靡一时，您可以使用 SVG 设计的内容没有限制。 如果您准备好在自己的网站上进行尝试，了解基本的动画概念将有助于您构建更复杂的设计。 与 JPEG 和 PNG 文件不同，SVG 非常适合 Web 上的动画，因为它们可缩放且与分辨率无关（这意味着它们可以缩放而不会降低质量）。 它们也很容易设置样式，因为您可以使用 CSS、过滤器和交互性来增强 SVG。

在我们深入学习本教程之前，您应该熟悉 CSS 转换和转换。 一些相同的概念将用于 SVG。

SVG 基础知识

SVG，即可缩放矢量图形，使用基于 XML 的文本格式来描述图像的显示方式。 SVG 是内部包含一堆 XML 的文本文件。 如果您使用代码编辑器打开一个，您就会明白我们的意思。 SVG 可以缩放到不同大小而不会降低质量的原因是因为文本用于描述图形。

在 SVG 图形的代码编辑器中

SVG 文件中的视觉信息由浏览器或您用来修改它的任何图形软件计算和呈现。 它们不像 JPG 或其他图像文件格式那么复杂，如果您愿意，可以在文本编辑器中手动设计和编辑它们。 它们可以使用 CSS 进行更改和样式化，使它们非常适合在 Web 上进行设计。

浏览器对 SVG 图形的支持非常普遍； IE8 可能会出现一些问题，但现代浏览器可以很好地处理 SVG。 这里或那里可能会有小错误，但通常它是一帆风顺的。

如何创建 SVG 图形

Adobe Illustrator 是创建 SVG 时的首选程序之一。 事实上，它们可以从头开始创建，因为它都是 XML，但使用设计程序可能更容易，尤其是对于更复杂的 SVG。

在 Adob​​e Illustrator 中进行设计时的提示

与任何其他 Adob​​e Illustrator 项目一样，边界框是创建插图的地方，因此确保包含所有内容非常重要。 最好的方法是选择您想要在 SVG 中包含的图稿，然后转到“对象”>“画板”>“适合图稿边界”。

svg-animations-css-clip-artwork-to-bounds

这是非常重要的一步。 有几次我们没有这样做，由于多余的空白，图像在网站上看起来很小。 让一切都完美地适合边界解决了这个问题。

svg-animations-css-artwork-to-bounds

当您处于设计模式时，这可能不是最有趣的事情，但是在您以后使用图形进行动画工作时，注意并保持图层命名的一致性将对您有所帮助。 “第一层，第二层”会让你很难记住哪些层包含图形的哪些部分。 这样做的原因是 Illustrator 将使用这些名称在 SVG 代码中生成 ID。

图层组很棒，尤其是对于更复杂的图形。 它们还用于在 SVG 文件中创建组。 当您使用它们时，我们强烈建议确保图层组仅包含相关形状，以保持您的文件干净并便于以后编辑。

在此文件中，您会看到轮子的外部名为“outer-wheel”，内部名为“inner-wheel”。 这是基本的，但它有效。

这是可选的，但通过 CSS 优化器运行它会很有帮助。 这样做很有可能会减小文件大小。 一个很好的选择是 Peter Collingridge 的 SVG Optimizer。 SVG OMG 也是一个值得研究的选项。

在 Adob​​e Illustrator 中导出 SVG 图形

现在您已经有了最终的 SVG 图像，需要将其导出以便可以在 Web 上使用。 转到文件 > 另存为 > SVG。 您还可以转到“文件”、“导出”、“.SVG”，具体取决于您使用的 Illustrator 版本。 这将保存为 flyweel_wheel。

执行此操作后，将出现一个包含几个选项的对话框（如果您没有看到以下所有选项，请转到“更多选项”）：

配置文件： SVG 1.1

类型：这控制您希望如何处理设计中的任何字体并将字体嵌入为 SVG。 我们没有任何东西，所以我们将把这个集合保留为 SVG。

子集化：此选项在需要时将字符详细信息嵌入到 SVG 文件中。 这允许文件显示用户系统上可能不存在的字体。 It's possible to only include the glyph(s) used in the SVG (which reduces file size) when “Only Glyphs Used” (if you use a special font for your artwork) is selected.

图像位置：这控制可以为 SVG 文件中的光栅化图像数据存储的信息，作为具有“嵌入”选项的数据 URI。 （在这种情况下不是超级相关，但这允许链接或嵌入图像，这会增加文件大小。）

CSS 属性： Presentation 属性允许在需要时将 CSS 样式放在 SVG 中。 根据您的用例，这可能是也可能不是最佳的。 Presentation Attributes 指定诸如fill: blue; 而不是传统的内联样式： . 表示属性通常更容易在 CSS 中覆盖。

更多高级选项：这组复​​选框允许您更改各种设置，包括您在各种数字中转到多少位小数。 这里一个应该就够了。 如果您的文件中涉及大量文本，则高级选项最有必要。 输出较少<tspan>元素的选项可以显着减小导出的 SVG 的大小。

在某些情况下，可能会沿着自定义路径绘制文本。 使用“为路径上的文本使用 <textPath> 元素”选项，它被导出为路径上的文本。 “响应式”选项也很重要。 如果未选中，SVG 文件将具有硬编码的宽度和高度。

如何使用 CSS 为 SVG 制作动画

现在有了一个实际的 SVG 可以使用，我们可以创建一个简单的动画来查看这一切是如何工作的。 CSS transform 属性和 translate 方法将帮助轮子移动。 使用 CSS 制作动画非常棒，因为不需要安装任何插件或库； 您只需要 HTML 和 CSS 即可开始。

SVG 可以像 HTML 元素一样使用 CSS 关键帧和动画属性或使用 CSS 过渡动画。 更复杂的动画通常会应用某种变换——平移、旋转、缩放或倾斜。

基础动画

下面是一个简单的动画，让轮子在悬停时变大：

 svg {
   高度：20%；
   宽度：20%；
   填充：#50c6db；
}
svg:悬停{
   变换：比例（1.25）；
   过渡持续时间：1.5s；
}
svg-动画-css-飞轮规模

纺车动画

这就是 Adob​​e Illustrator 的辛勤工作得到回报的地方。 有效命名图层的努力将得到很好的利用。 使用外层和内层组，可以控制和自定义动画，这是动画光栅图形的巨大优势。

车轮 SVG 将用作加载微调器图形。 随着颜色从浅变深，外轮会旋转，内轮会略微变大。

SVG 元素在大多数情况下是非常可预测的，但有一些定位问题可能会稍微棘手一些。 如果您习惯了其他 HTML 元素，它们会以相同的方式响应 transform 和 transform-origin。 需要注意的一件事是它们不遵循盒模型，即边距、边框、填充等。这使得定位和转换这些元素稍微更具挑战性。

变换原点基础知识

transform-origin 属性用于改变元素变换原点的位置。 HTML 元素的变换原点位于 (50%, 50%)，这是元素的中心。

svg-animations-css-在其他图形上旋转
这已旋转 45 度，变换原点为 50% 和 50%。

SVG 元素的变换原点位于 (0, 0) 点，即画布的左上角。

svg-动画-css-旋转-svg
这已旋转 45 度，默认变换原点为 0 和 0。

SVG 元素是如何围绕自己的中心旋转的？ 需要对 transform-origin 属性进行调整。 这可以使用百分比值或绝对值（像素、ems 或 rems）来设置。 该值将相对于元素的边界框进行设置。

如果我们要使用百分比值将<rect>的变换原点设置为中心，它会像这样完成：

 矩形 {
  变换原点：50% 50%；
}

造轮子

首先，设置旋转关键帧是关键。 这将是一个旋转图形，因此需要完全旋转。 还将应用淡入效果。 这个例子可以在 Codepen 上找到。

 @keyframes 旋转{
    从{变换：旋转（0度）;}
    到{变换：旋转（360度）;}
}
@keyframes 淡入{
    0% {
        不透明度：0.35；
    }
    50% {
        不透明度：.5；
    }
    75% {
        不透明度：0.75；
    }
    100% {
        不透明度：0.25；
    }
}

接下来，创建 SVG 包装器很重要。

 .svg-容器{
  高度：100%；
  宽度：100%；
  最大高度：15cm；
  最大宽度：15cm；
  保证金：0自动；
}

创建了一般 SVG 样式，这是指定 transform-origin 的地方。

 svg {
  顶部：50%；
  左：50%；
  位置：绝对；
  最大高度：15cm；
  最大宽度：15cm；
  宽度：20%；
  高度：20%；
  填充：#50c6db；
  变换：翻译（50%，50%）；
}
svg-动画-css-轮图

这是层命名变得非常有用的地方。 旋转动画应用于整个 SVG 图形，因为它是在#outer-wheel上指定的，但内轮具有淡入淡出效果，仅适用于图形的内部部分。 通过仅针对#inner-wheel ，应用淡入淡出动画。

 #外轮{
  动画：自旋 4s 无限线性；
}
#内轮{
  动画：fadeIn 2s无限线性；
}
svg-动画-css-旋转飞轮

希望这能很好地介绍 SVG 和基本动画技术。 随着您对它们的使用越来越多，这些基本思想将帮助您创建更复杂的动画。