创建交互式svg

SVGator中有多个导出选项。除了选择是循环播放动画还是每页加载一次动画之外，还可以通过将动画设置为悬停，滚动或单击来开始使其交互。
您将在“导出设置”面板中找到以下选项：
创建交互式svg - 图1
正如您在该图像中看到的那样，在处理动画时没有什么特别的设置。您只需单击“导出”按钮，并将动画设置为在单击，滚动或悬停时开始，就可以使之前保存在帐户中的任何动画成为交互式。
您还可以控制第二次单击或鼠标移出时发生的情况：暂停，重置，撤消和继续。
请注意，您必须选择JavaScript作为动画类型，才能在单击时启动动画。此选项不适用于CSS。
要开始滚动查看动画，必须将SVG内联添加到您的网站。此功能不适用于创建交互式svg - 图2或标记。
不幸的是，您不能为每个元素（仅针对每个动画）设置这些交互式事件。
交互式SVG动画非常适合用于指出您的业务的某些功能或服务的插图，因此吸引了网站访问者的更多关注并提高了参与度。
如果您希望动画在网站访问者单击页面上的其他内容时开始播放，则可以先扩展画布大小，然后再从SVGator导出SVG，这样在添加到SVG之后，它的大小足以覆盖其他元素。你的网页。

将鼠标悬停在动画上

您可以将动画设置为在鼠标悬停时开始，并选择是冻结，反转还是在鼠标悬停时重新开始。您可以通过单击应用程序右上角的Gear图标找到这些选项。
创建交互式svg - 图3
JavaScript和CSS都支持这些选项。
创建交互式svg - 图4
请注意，您必须导出文件或单击右上角的预览按钮才能实际查看这些选项的工作方式：
创建交互式svg - 图5

鼠标移出时反转动画

在SVGator的导出面板中，可以将动画设置为单击或鼠标悬停开始。如果将动画设置为在鼠标悬停时开始，则还可以选择在鼠标悬停时动画会发生什么：暂停，重置，反向或继续。
image.png
鼠标移出时反转动画意味着动画将向后播放一次。即使将动画设置为无限循环，鼠标移出时动画也只会向后播放一次。
单击时还可以反转动画，这意味着您可以将动画设置为在第二次单击时反转。此选项非常适合切换按钮或汉堡菜单，但您也可以将其用于交互式图标和插图。

滚动动画

默认情况下，所有SVG动画将在页面加载时开始。一旦准备好导出动画，就可以更改默认设置并将动画设置为开始滚动。
⚠️为了使此功能起作用，必须将SVG内联添加到您的网站。这不适用于或创建交互式svg - 图7标记。
您将在“导出”面板中找到此选项：
创建交互式svg - 图8
这意味着动画将在视口中可见时开始。当用户在页面上向下滚动时，视口是网站的实际可见区域。
通过调整“查看”百分比，您可以控制动画在滚动中开始的速度。例如，如果将“视图”设置为1％，即使只有一小部分SVG可见，它也会使动画立即开始。将“视图”设置为50％意味着必须在视口中看到一半的SVG，动画才能开始。
我们通常建议将其设置为25％左右，但您可以根据网站设计和所需的用户体验进行调整。
如果用户滚动到动画上方，则动画将停止播放。一旦用户滚动回到动画，它将从头开始再次播放。

点击动画

您将在“导出设置”面板中找到此交互式导出选项。如果将动画设置为在单击时开始，则还可以控制第二次单击时发生的情况。您可以选择诸如“暂停”，“重新启动”，“撤消”或“继续”之类的选项。
这些选项非常适合切换按钮，汉堡菜单以及网站上某些功能或服务的插图。
您可以通过单击导出按钮或应用程序右上角的预览设置来找到这些选项。
创建交互式svg - 图9
要在点击时开始播放动画，必须选择JavaScript作为动画类型，因为CSS不支持此功能。