前端程序员如何转投SVG领域？（ 计育韬老师高校公益巡讲答疑实录2024）

这是计育韬老师第 8 次开展面向全国高校的新媒体技术公益巡讲活动了。而在每场讲座尾声，互动答疑环节往往反映了高校师生当前最普遍的运营困境，特此计老师在现场即兴答疑之外，会尽量选择有较高价值的提问进行文字答疑梳理。

*本轮巡讲主题除了涉及 SVG 交互外，还包含了新媒体中 AI 人工智能工作流的详解，为高校师生带来包括与多家央媒的项目合作经验和复旦大学本校的案例分析，因此答疑梳理中也会出现与 AI 相关的知识点，如有任何偏颇之处也欢迎在评论区斧正。

第六期计育韬老师继续梳理了在江西高校的讲座中，关于「有前端经验的程序员如何转投SVG领域？」的问题，一起来看看计育韬老师的答复吧！

归零学习

由于 2016 年计育韬和林喆老师在制定《SVG AttributeName 白名单》时，已经剔除了部分原 W3C 中的高性能动画类型，且在微信和微博生态中不支持以 JavaScript 对 SVG 进行驱动和管理，因此 SVG 交互设计的代码体系与当下前端开发领域的知识图谱差异巨大。

加之微信生态中对

<id>

禁用，因此它的动画组合的逻辑都完全超乎常规动画设计思维。综上，归零学习（unlearn）对从前端转投入该领域的人来说变得至关重要。

当然，前端经验有助于开发者对结构框架（父子关系）的高效识别，但 SVG 毕竟隶属于 XML 时代下的 CSS 渲染表现，而非前端开发者烂熟于胸的 CSS-3 体系，所以计育韬老师认为只有敢于突破定式思维，从一个基本图形运动开始归零学习才能逐步掌握它的技术体系。

关于当下技术白名单的情况，可以参考：

举个例子

提到编组动画逻辑，计育韬老师在现场拿起了两瓶矿泉水举例：

“设想现在，我们计划通过点击某个按钮，让两瓶矿泉水彼此按相同距离分离。”按照常规的前端开发思路，必定是为两个瓶子标记两个

<id>

，随后通过 button.click 事件引发它们各自的平移。

但在微信公众号的 SVG 交互设计体系中，上述思路是行不通的。那么结合

<g>

编组，我们应当把按钮热区放在最内层，并绑定第一个瓶子。随后再进行一次编组，绑定外层第二个瓶子。

接下来，当我们点击按钮时，对外层结构赋予一个 (N,0) 的位移量，使得整个编组（也就是两个瓶子一起）以 N 量进行平移动。随后对内部赋予一个（-2N,0）的位移量，使得内部瓶子以两倍 N 量反向进行平移，这样才在视觉上形成最初的需求：通过点击某个按钮，让两瓶矿泉水彼此按相同距离分离。

关于上述案例特性，在 SVG 编辑器内常有应用。同学们可以点击阅读《黑科技编辑器 | 开门特效教程》等包含「开门」特性的组件 DEMO，检查代码结构加深理解认知。

计育韬老师的这个举例生动反映了编组动画的独特魅力，它的本质是数学逻辑的应用。拓展到更复杂的综合动画、多叉树等无不基于这种思维的联想发散。

后续答疑预告

#目前使用国内 AIGC 工具会否存在版权争议？

#AIGC 创作过程中提示词 Prompt 有什么建议？

#配音方面目前可以用 AIGC 替代吗？

#在国内文案写作有哪些合适的 AIGC 工具？

#您如何看待AIGC中的美术版权争议问题？

#H5和SVG的最大区别和各自优势是什么？

#如果要基于交互设计创意应该做哪些准备？

#可以运用AI写SVG代码吗？

如有意向报名承办巡讲的高校站点，欢迎查看「报名须知」并在评论区留下你的联系方式和组织信息，助教老师将协助前期对接工作。

-END-