SVG 动画：如何使 SVG 看起来像被绘制一样

SVG 是一种矢量图形格式，允许在 Web 上生成与分辨率无关的高质量图形。 但它最酷的功能之一是您可以使 SVG 看起来就像在页面上绘制一样。 有几种不同的方法可以做到这一点，但一种方法是使用元素。 通过随时间设置元素的属性值，您可以创建运动的错觉。 例如，假设您有以下 SVG ：如果您想让圆看起来像在页面上绘制的一样，您可以在元素内添加以下元素：这将使圆的半径从 0 逐渐增加到 50在 2 秒的过程中。 因为我们添加了值为“freeze”的“fill”属性，一旦动画完成，圆将保持在其最终半径。 如果你想为效果添加更多的真实感，你还可以为“stroke-dasharray”属性设置动画。 这将使它看起来好像是用钢笔或铅笔绘制的圆圈。 例如：这将使圆看起来好像是用钢笔或铅笔绘制的，从外向内绘制。 您还可以做一些其他的事情来使效果更逼真，但这应该给您一个很好的起点。

在现代 UI 中使用 SVG 很方便，但让它们出现在您的页面中却很乏味。 仅使用SVG 元素和 CSS 即可轻松创建——无需特殊工具！ 通过跟随我的 CodePen 示例（所有这些示例都在 React 中），您将能够学习如何做到这一点。 您可以将库展开得比平时多一点，这样就不会在捆绑包上浪费太多空间。 在美容界，如果没有别的，你至少会有几个人使用这种效果。

Svgs 可以有动画吗？

凭借随时间改变矢量图形的能力，可以使用 SVG 创建范围广泛的动画效果。 可以通过以下方式为 SVG 内容制作动画。 这就是使用 SVG 为图像制作动画的方式。 SVG 文档元素的基于时间的变化可以用片段来描述。

它是一种描述具有二维属性的图像的 XML 标记语言。 您现在可以从 Animate 导出SVG 文件，而无需为它们创建任何定义或 ID。 此导出功能将允许提高导入到 Character Animator 中的 SVG 的质量。 ScalableVDG 导出处理多个符号而不丢失内容。 舞台上的艺术品与这里看到的非常相似。 Animate (13.0) 中的 FXG 导出功能已被替换。 因此，某些动画不支持 SVG 格式。 这些功能可以配置为在导出内容时删除或默认为支持的功能。

在 SVG 的帮助下，设计人员可以创建具有响应性、自适应性和可扩展性的交互式设计。 您网站的动画可以通过触发用户发起的操作在用户和网站之间产生一种交互感。 即使缩小到很小的尺寸，SVG 也可以产生高质量的动画，使其成为需要响应式和自适应设计的图形的绝佳选择。

Svg 文件的多种用途

使用 SVG 文件可以创建各种图形、包装和用户界面。 可缩放矢量图形文件可以使用多种方法制作动画，包括编写脚本并将它们导出到 .SVG 文件。

如何在 Svg 中为路径设置动画？

有几种方法可以在 svg 中为路径设置动画。 一种方法是使用 stroke-dasharray 和 stroke-dashoffset 属性。 stroke-dasharray 属性指定笔画中虚线的长度，stroke-dashoffset 属性指定虚线数组起点和笔划起点之间的距离。 通过为 stroke-dashoffset 属性设置动画，您可以创建笔画本身的错觉。

Codrops 是基于的简单动画。 VScript 文件。 矢量图像 (SVG) 是一种图像，它不是由彩色像素组成，而是由可以使用屏幕呈现的数学函数组成。 在本文中，我们将回顾函数 getPointAtLength() 并了解如何使用它以创造性的方式表示 SVG 路径的数据。 我们将使用新的圆形元素为该动画的每一帧设置动画，并将其放置在路径上。 使用 createParticle 函数，每一帧都将填充一个新的粒子，该粒子将淡出并弹出。 除了为保险丝的 stroke-dashoffset 设置动画以使动画更逼真之外，我还为其添加了一抹色彩。

到目前为止，我们可以提取沿 SVG 路径的点的坐标，并尝试将它们也应用于其他对象。 矢量的动画将有一个延迟，该延迟是根据它自己沿路径的距离计算的，允许粒子随意地在路径周围漂浮。 我迫不及待地想看看你是怎么想出来的，我迫不及待地想在 Twitter 上与我分享你的结果。

为什么你的 Svg 没有动画

可以使用剪影图形生成器创建动画插图。 CSS 或 JavaScript 是其支持的常用动画技术。 但是，如果您的 SVG 不是动画的，可能有几个原因。 最常见的问题之一是使用 *img> 标签而不是 *object* 标签。 如果您将所有 img> 标签替换为 object> 标签，您的 SVG 将恢复动画。

Svg 绘制动画 Codepen

这个问题没有千篇一律的答案，因为创建 SVG 绘图动画所需的代码量会因动画图像的复杂性而异。 但是，有一些资源可以帮助您开始编写 SVG 绘制动画代码。 CodePen 就是这样一种资源，它提供了各种各样的 SVG 动画示例供您探索。 另一个有用的资源是SVG 动画社区组，这是提问和查找代码片段以帮助您入门的好地方。

Svg 填充动画

SVG 填充动画提供了一种为 SVG 形状填充动画的方法。 默认情况下，SVG 形状的填充是纯黑色。 但是，您可以将填充更改为您想要的任何颜色。 您还可以为填充设置动画以随时间变化。

基于 XML 的矢量图形是标记语言，例如 SVG，通常用于可缩放矢量图形。 它允许您通过使用 2D 平面识别 2D 平面中的点来绘制路径、曲线和形状。 CSS Level 3 中的填充和描边模块允许您设置外部样式表来显示颜色和图案。 首先，导入字体并对所有项目执行重置。 Box-sizing 是将空盒子放入已占用容器的过程。 通过添加元素的总宽度和高度，将填充和边框值添加到元素的尺寸。 A rules display: flex 元素应在 rules display: flex body 中垂直和水平放置，以便更容易将子元素居中。

stroke-dasharray 的长度将由填充效果决定。 此外，因为它具有相同的值，我们将用一个大破折号填充它，并且它的线段之间没有间隙。 当应用 100ms setTimeout 时，-dashoffset 变量将被更新。 每个 li 项目都将使用 data-* 属性添加注释值。 在 increaseNumber() 函数中，我们根据类名使用 .percent_int 或 .percent_dec 元素，以防输出应包含小数点。 当元素从一个迭代更改为下一个迭代时，计数器变量将作为文本附加。 但是，在某些情况下，它会长时间增加值。 如果音符达到我们要求的值，则必须设置 clearInterval。

为什么你应该为高性能网站制作动画填充

因此，动画填充意味着每次播放动画时浏览器都会创建一个新版本的元素，使其成为高性能网站的绝佳选择。

Svg 线条动画生成器

SVG 线条动画生成器是创建简单线条动画的绝佳工具。 它易于使用，不需要任何编码知识。 只需上传您的 SVG 文件，选择您的动画设置，然后下载动画文件。

今天我终于第一次使用了SVG线条动画，这个我喜欢了很久的功能。 这种效果可以通过使用内联 SVG来实现（这意味着数据被插入到 HTML 中，而不是仅仅将 .svg 链接到图像标签）。 还需要在 SVG 路径中具有 stroke 属性。 就结构而言，SVG 几乎肯定与大纲相同。 CSS 可用于调整笔划的宽度和颜色。 上面的CodePen去掉infinite属性，去掉animation-fill-mode注释就可以玩了。 然后，通过我们的动画，我们可以通过将我们的形状绘制到属性中来将属性返回到它之前的状态。

如果您不希望动画重复（您可能不会），则必须应用最终的 stroke-dashoffset 值，这样它就不会重复。 例如，您可以尝试手动方法或查看动画库等库来帮助您。 您希望对不同的路径应用不同的动画延迟以实现交错效果，但您不希望每个路径同时开始动画。 因为文本是图像，所以如果您不提供标题，屏幕阅读器将不会阅读它。

我们如何在 Svg 中创建动画？

为了使帧动画化，选择它然后单击启用 SVG 导出。 通过选择该帧中的一个节点，您可以创建动画，例如 X, Y, X, Y, X, Y, Y, X, Y, Y, X, Y, Y, X, Y, Y, Y, Y, Y, Y, Y, Y，使用内置的实时预览根据需要调整动画，直到您对它们的性能感到满意为止。

Adobe Illustrator 对 Svg 的强大支持

领先的矢量图形设计软件 Adob​​e Illustrator 一直对 SVG 提供出色的支持。 随着 Illustrator CC 2017 的发布，对SVG 的支持有了更多改进。 为了提供丰富和详细的图形，您可以使用 SVG 格式，它允许您以任何您喜欢的方式设计图形。 在为您的网站设计图形或创建移动应用程序时，无论您是设计师还是 Web 开发人员，Illustrator 都是一个绝佳的选择。 Illustrator 对 SVG 的强大支持使其成为创建高质量且易于使用的图形的理想选择。 通过将 SVG 文件直接导出到 Web，您可以轻松地与客户和同事分享您的设计。 由于与 Adob​​e Creative Cloud 的集成，还有一项功能允许您访问创建令人惊叹的 SVG 图形所需的所有工具和功能。