文章标签

假设您在 SVG 中有一条线

<svg<line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" /</svg

您可以使用 CSS 中的 stroke-dasharray 属性创建虚线

line {
  stroke-dasharray: 5;
}

该 5 值是基于…的相对单位

我想为书法字体制作手写动画——那种单词像被无形的笔书写一样动画。因为书法字体具有不均匀的笔画宽度（从某种意义上说，它们甚至不是笔画…

这种 SVG + CSS 动画技巧让我欲罢不能。Mikael Ainalem 分享了如何绘制汉堡图标（你非常熟悉的“三条线”），然后以一种令人惊讶的方式对其进行动画处理…

在使用 SVG 绘制线条时，通常会有一个带有<path></path>元素的stroke。您设置一个与路径本身一样长的stroke-dasharray，以及一个扩展到整个描边…的stroke-offset。

CSS 中的stroke-dasharray属性设置 SVG 形状描边中虚线的长度。更具体地说，它设置了交替的虚线和它们之间间隙的模式的长度…

我们之前已经深入了解了SVG 线条绘制的工作原理。这是一个巧妙的技巧，您使用虚线作为描边，但虚线中的间隙很长，覆盖了整个路径。然后你…