如何使用 CSS 创建 SVG 动画

已发表: 2019-02-03

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

在我们深入学习本教程之前，您应该熟悉 CSS 过渡和变换。 （如果您不是，请查看这篇文章！）一些相同的概念将用于 SVG。

SVG 基础知识

SVG 或 Scalable Vector Graphics 使用基于 XML 的文本格式来描述图像的显示方式。 SVG 是包含大量 XML 的文本文件。 如果你用代码编辑器打开一个，你就会明白我的意思。 SVG 可以在不损失质量的情况下缩放到不同大小的原因是因为文本用于描述图形。

svg-图形-xml

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

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

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

如何使用 CSS 为 SVG 设置动画

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

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

基本动画

以下是一个简单的动画，它使轮子在悬停时增长： 

svg {
   height: 20%;
   width: 20%;
   fill: #50c6db;
}

svg:hover {
   transform: scale(1.25);
   transition-duration: 1.5s;
}
SVG-动画-CSS-飞轮规模

转轮动画

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

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

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

变换原点基础知识

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

svg-animations-css-rotate-on-other-graphic
这已旋转 45 度，变换原点为 50% 和 50%。

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

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

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

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

rect {
  transform-origin: 50% 50%;
}

制作轮子

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

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

@keyframes fadeIn {
    0% {
        opacity: .35;
    }

    50% {
        opacity: .5;
    }

    75% {
        opacity: .75;
    }

    100% {
        opacity: .25;
    }
}

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

.svg-container {
  height:100%;
  width:100%;
  max-height:15cm;
  max-width:15cm;
  margin: 0 auto;
}

创建了通用 SVG 样式，这是指定变换原点的地方。 

svg {
  top: 50%;
  left: 50%;
  position: absolute;
  max-height:15cm;
  max-width:15cm;
  width: 20%;
  height: 20%;
  fill: #50c6db;
  transform: translate(50%, 50%);
}
svg-动画-css-轮图

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

#outer-wheel {
  animation: spin 4s infinite linear;
}

#inner-wheel {
  animation: fadeIn 2s infinite linear;
}
svg-动画-css-旋转飞轮

希望这能让您很好地了解 SVG 和基本动画技术。 随着您更多地使用它们，这些基本想法将帮助您创建更复杂的动画。

下一步：设计
网站更快！

在本指南中，我们将介绍如何更快地工作和加快 WordPress 工作流程的技巧。 从最初的站点设置到上线，了解如何从日常工作中减少工作时间！

在这里免费下载。

本文最初于 2017 年 6 月 1 日发布。 上次更新时间为 2019 年 2 月 16 日。