iSVG

官方图文音频播放器改版后，旧的音频改造排版方法已经失效。这篇作品是基于新的播放器 JS 模型设计，由我们 JZ Creative 执行开发工作（GL 大神操刀），示范了新版音频播放器前提下的标准改造形式。

我们推荐本作并非其背后有焕然一新的创造性技术，而是它通过优秀的动态设计，把一个最基本的互动模型效果发挥到了极致。非常建议点开原文体验每一个画幅的动态效果。通过与交互结合，动画师的创作在新媒体内可以像本案例一样给人带来更多惊喜。目前该效果可以在 SVG 黑科技编辑器（https://www.e2.cool/）中通过「GIF控制器」实现。

GL 通过基于穿透触发的“点 A 见 B”特效，为本文民生银行信用卡提升了一图流的互动趣味性。爱不会被隔离。二月情人节的多篇交互中，都会见到疫情的背景渲染。而通过黑科技互动，让这个料峭的春天在这一天变得有爱！

疫情之下，一套小瓶子的趣味内容在互联网中传播，激发了不少人乐观面向未来的心态。本文由网易将 H5 版小瓶子互动通过 SVG 黑科技排版技术进行了图文内复现，由此在微信公众号领域投下颗种子，在不到一周时间内各家公众号版本的小瓶子遍地开花，不少小瓶子的变体也应运而生。另外，包括秀米、135 编辑器等排版工具都纷纷上线了模板，帮助运营人打造自己的快乐小瓶子互动。

答题卡模式的 SVG 交互在业内已成经典，而本作是第一套加入计分系统的商业作品应用。理论上，“计分”逻辑在 SVG 采用内联式且不支持 ID 选择器的情况下并不可行，但在本作中，我们 JZ Creative 的开发者通过双层触发和巧妙的图层排列，让计分逻辑通过线性逻辑进行演化，也让复工更有保障。

点击锦鲤，你就可以在阅读过程中让一条摆动着的锦鲤沿特定轨迹不断向下游动，中途还会出现水波涟漪……JZ 在本作的交付中，应用了序列帧式互动、轨迹<-d>动画、双层触发等技术点。

这是一篇对代码编组有较高要求的测试题型 SVG 互动排版，需要实现点击时反馈当前选项正误并同步勾选正确选项，此外要并行出现题目解析并支持超链接转跳，因而即便如鼈臑这样的大神，在开发工作上也耗费了大量时间。测试题型 SVG 互动是近期相对较少出现的黑科技排版模式，品牌主不妨思考它的应用可行性。

由 JZ 提出的全新遮罩式滑动，可以在确保图片完整的情况下形成镂空效果，而无需上层挖空后再通过穿透触发。其关键在于<-webkit-mask-image>的技术应用，由此以往的各类穿透式滑动（如车窗外风景变化）制作更为便捷，有兴趣的运营人不妨尝试。目前该效果可以在 SVG 黑科技编辑器（https://www.e2.cool/）中通过「顶层滑动」实现。