复杂的 polygon 矢量如何做 CSS 动画？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 2678 天前的主题，其中的信息可能已经有所发展或是发生改变。

使用 iPad Pro 上的 Nebo app 写了一些字，导出为 HTML，是 svg 的。

但是有一些笔画比较复杂，尽管我都尽可能一笔一画拆开了，但 svg 内不全是 <path>，而有一些是 <polygon>，也就是超过三边的多边形矢量。

我知道 <path> 的矢量，能做单个笔画从无书写到完整的动画，原理是将线条的描边设为虚线式，然后设置每个虚线段的长度超过线条本身长度，再变化虚线段之间的距离值。

但 <polygon> 的笔画可想而知，因为笔画较为复杂，而变为了非线条的面，每个 <polygon> 内的坐标都有数百个点。

那么，如何为 <polygon> 制作一笔一画出现的 CSS 动画呢？

4 条回复 • 2017-07-25 13:40:16 +08:00

P233

2017-07-25 07:14:38 +08:00

把 polygon 转成 path 呢？ "points" 改成 "d"，属性值的开头和结尾分别添加 "M" 和 "z"

P233

2017-07-25 07:34:05 +08:00

@P233 有点问题，用 stroke 变化，原来的 polygon 是个闭环

islujw

2017-07-25 13:05:58 +08:00

@P233 polygon 是定义多边形，和 path 应该是不一样的。

P233

2017-07-25 13:40:16 +08:00