svg｜写一手流利的毛笔字（基础知识篇）原文链接并附上自己的一点点解释在stackoverflow上，时不时会出现一

原文链接并附上自己的一点点解释

在stackoverflow上，时不时会出现一个问题：是否存在与stroke-dashoffset技术同样能力的方法来为适用于属性为fill的SVG stroke 制作动画，但是仔细想想，问题真正想提出的问题是这样的：我有一些类似于线条的东西，但是因为在SVG中被定义为fill有不同的画笔宽度，在SVG中被定义为路径的填充。这个‘画笔’如何动画化？

简而言之就是：如何创作动画书法？

---蒙版路径覆盖书法笔画

其基本技术相对简单：在书法顶部绘制第二条（灰色）路径，使其沿着笔画线，然后选择笔触宽度，使其覆盖书法的所有位置

顶部的这条灰色路径将作为其下方路径的掩码，将stroke-dashoffset动画技术应用于蒙版路径，结果看起来好像是直接在屏幕上实时‘写入’

这是mask的一种情况，而不是clip-path--那是行不通的，剪辑路径总是引用路径的填充区域，但忽略stroke（具体请参考这篇文章）

最简单的变体是为掩码中的路径设置stroke：white，然后白色区域外的所有东西隐藏起来，而里面的任何东西都没有改变的显示出来（因为在蒙版中的白色为显示，黑色为不显示，可以大致的这样理解）

代码地址

效果如图：

到此为止，就这么简单。然而，当书法线条重叠时，事情就会变得麻烦。这是在一个简单的实现中发生的情况：

代码地址

效果如图：

在交点处，蒙版显示了交叉笔刷的一部分，因此，书法必须切割不重叠的部分，按绘制顺序堆叠它们并为每个定义单独的蒙版路径。

--蒙版路径上的切口和毛笔必须匹配

--解决方案是将重合的部分分为两部分，这样就不会出现👆的问题了

最棘手的部分是保持绘制图是单个连续笔画的stroke,如果你切割了一条平滑的路径，只要两条路径切线在它们的公共点具有相同的方向，两端就会吻合。笔画的末端与其垂直，并且书法线条中的切口必须完全对齐。注意所有路径都有连续的方向，一个接一个的为它们制作动画。

虽然许多线条动画可以通过粗略计算长度来完成stroke-dasharray，但这种情况需要准确的测量，tip：你可以通过以下方式获取：

document.querySelector('#mask1 path').getTotalLength()

代码地址

效果如图：

‘一个接一个’部分用CSS编写有点尴尬，最好的模式可能是为所有动画提供一个相同的开始时间和总持续时间，然后在stroke-dashoffset更改之间设中间关键帧（这里推荐一个插件：GSAP）

像这样的东西：

@keyframes brush1 {
  0% { stroke-dashoffset: 160; } /* leave static */
  12% { stroke-dashoffset: 160; } /* start of first brush */
  44% { stroke-dashoffset: 0; }   /* end of first brush equals start of second */
  100% { stroke-dashoffset: 0; }   /* leave static */
}

@keyframes brush2 {
  0% { stroke-dashoffset: 210; } /* leave static */
  44% { stroke-dashoffset: 210; } /* start of second brush equals end of first */
  86% { stroke-dashoffset: 0; }   /* end of second brush */
  100% { stroke-dashoffset: 0; }   /* leave static */
}