svg交互_解释了AdobeIllustrator的SVG交互⾯板
svg交互
SVG正在成为Web开发和设计的重要组成部分。 了解SVG并能够在您的技能中列出它变得越来越重要。
在今天的教程中，我们正在回答来⾃Tuts +阅读器的特定请求。 我们将看⼀下Adobe Illustrator中的⼀个⼯具，该⼯具可帮助创作SVG与JavaScript的交互性。 称为SVG互动⾯板 。
快速免责声明
我将为每个⼈省去⼤量实际上实际上是⽆效的⼯具的详细操作。 我不会在这⾥讨论变量选项卡，因为我确实没有看到太多的⽤途，⽽且（我认为）使⽤交互⾯板从项⽬本⾝编写JavaScript更为明智。
我也不会遍历外部JavaScript⽂件的链接，但是在阅读了本⾯板的⽤途之后，您始终可以在以后进⾏ 。
1.瞄准对象
⾸先在美⼯板上选择⼀个对象，或者在“ 图层”调板中选择⼀个项⽬作为开始（有关更多信息，请参阅 。）
svg图
转到窗⼝> SVG交互 。
2.进⾏活动
现在，我们需要向对象添加⼀个事件。 此事件将确定JavaScript在什么情况下⽣效。 在“ SVG交互”⾯板中，在“ 事件”选择菜单中选择⼀个事件。 在这⾥，我选择了onmouseover ：
在JavaScript⽂本框中，编写⼀个JavaScript命令，该命令将由您选择的事件触发。 在这种情况下，我们添加了：
alert("hello");
按Enter将条⽬添加到事件列表中。
3.检查您的XML输出
创建事件后，Illustrator将使⽤您选择的⽬标（在本例中为我的group元素，称为g标签）并应⽤JavaScript内联。 如果复制对象并将其直接粘贴到⽂本编辑器中，则将获得该对象的XML。 它看起来像这样：
<svg><g id="clock" onmouseover="alert('hello');"></g></svg>
正如您在XML输出中看到的那样，已经为我们内联了事件侦听器和处理程序。 现在，当您在浏览器中打开SVG时，将⿏标悬停在SVG上时，您会看到带有“ hello”字样的警报。
注意 ：请注意，除⾮绝对必要，否则我不⽀持将内联JavaScript⽤于任何东西！
删除JavaScript事件
在“ SVG交互”⾯板中，单击⼀个JavaScript事件以突出显⽰它。 从“ SVG交互”⾯板菜单的右下⽅选择垃圾箱。
结论
⽽已！ 如我们所见，SVG交互调⾊板允许设计⼈员直接在Illustrator中添加交互编程。 同样，除⾮您绝对有理由使⽤它，否则我将远离该⼯具。 坚持从项⽬中编写JavaScript，⽽不是直接在Illustrator中编写。
svg交互

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。