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

[islujw]

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

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

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

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

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

[P233]

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

[P233]

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

[islujw]

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

[P233]

https://stackoverflow.com/questions/32060838/svg-handwriting-animation-without-using-stroke-properties

这个应该会有帮助吧，没有直接变化笔画本身，而是去变化笔画的遮罩。