svg交互_解释了Adobe Illustrator的SVG交互面板

svg交互

SVG正在成为Web开发和设计的重要组成部分。 了解SVG并能够在您的技能中列出它变得越来越重要。

在今天的教程中，我们正在回答来自Tuts +阅读器的特定请求。 我们将看一下Adobe Illustrator中的一个工具，该工具可帮助创作SVG与JavaScript的交互性。 称为SVG互动面板 。

快速免责声明

我将为每个人省去大量实际上实际上是无效的工具的详细操作。 我不会在这里讨论变量选项卡，因为我确实没有看到太多的用途，而且（我认为）使用交互面板从项目本身编写JavaScript更为明智。

我也不会遍历外部JavaScript文件的链接，但是在阅读了本面板的用途之后，您始终可以在以后进行更仔细的检查 。

1.瞄准对象

首先在美工板上选择一个对象，或者在“ 图层”调板中选择一个项目作为开始（有关更多信息，请参阅使用“图层”调板更改艺术品的外观 。）

转到窗口> SVG交互 。

2.进行活动

现在，我们需要向对象添加一个事件。 此事件将确定JavaScript在什么情况下生效。 在“ SVG交互”面板中，在“ 事件”选择菜单中选择一个事件。 在这里，我选择了onmouseover ：

在JavaScript文本框中，编写一个JavaScript命令，该命令将由您选择的事件触发。 在这种情况下，我们添加了：

alert("hello");

按Enter将条目添加到事件列表中。

3.检查您的XML输出

创建事件后，Illustrator将使用您选择的目标（在本例中为我的group元素，称为g标签）并应用JavaScript内联。 如果复制对象并将其直接粘贴到文本编辑器中，则将获得该对象的XML。 它看起来像这样：

正如您在XML输出中看到的那样，已经为我们内联了事件侦听器和处理程序。 现在，当您在浏览器中打开SVG时，将鼠标悬停在SVG上时，您会看到带有“ hello”字样的警报。

注意 ：请注意，除非绝对必要，否则我不支持将内联JavaScript用于任何东西！

删除JavaScript事件

在“ SVG交互”面板中，单击一个JavaScript事件以突出显示它。 从“ SVG交互”面板菜单的右下方选择垃圾箱。

结论

而已！ 如我们所见，SVG交互调色板允许设计人员直接在Illustrator中添加交互编程。 同样，除非您绝对有理由使用它，否则我将远离该工具。 坚持从项目中编写JavaScript，而不是直接在Illustrator中编写。

翻译自: https://webdesign.tutsplus.com/tutorials/adobe-illustrators-svg-interactivity-panel-explained--cms-23600

svg交互