本系列的上一篇教程向您展示了如何使用 KUTE.js 对任何元素的不同 CSS 属性进行动画处理。但是，核心引擎不允许您对特定于 SVG 元素的属性进行动画处理。同样，您无法使用笔画对不同路径形状的 SVG 变形或不同 SVG 元素的绘制进行动画处理。您必须使用 KUTE.js SVG 插件来完成这些任务。

在开始之前，请记住，您必须包含 KUTE.js 核心引擎和 SVG 插件才能使本教程中的示例正常工作。

变形 SVG 形状

将一种 SVG 形状变形为另一种形状是您会遇到的一项非常常见的功能。 KUTE.js SVG 插件为我们提供了轻松创建自己的变形动画所需的一切。

使用此库可以通过三种方式变形 SVG 形状：

1. 您可以使用 fromTo() 方法来指定元素的初始和最终 SVG 路径。
2. 您还可以使用 to() 方法并避免指定初始路径。在这种情况下，变形的起始值将根据要变形的所选元素的 d 属性的值确定。
3. 还有一个选项是将最终路径作为字符串直接传递给补间。这样，您就可以避免 SVG 中有两个不同的路径。

KUTE.fromTo('#shape-a', {path: '#shape-a' }, { path: '#shape-b' });
KUTE.to('#shape-a', { path: '#shape-b' });

KUTE.fromTo('#shape-a', {path: '#shape-a' }, { path: 'The path of #shape-b as a valid string.' });
KUTE.to('#shape-a', { path: 'The path of #shape-b as a valid string.' });

本文地址：http://gzyunji.cn