如何使用SVG在网页上设置手写文字的动画效果？

Question

我正在试图创建一个我创建并保存为SVG的文本。到目前为止，我只能对中风进行动画制作，但这不是我想要的。 这里是链接到我所需要的例子：

[http://codepen.io/se7ensky/pen/waoMyx][1] 

[https://codepen.io/munkholm/pen/EaZJQE][1] 

我会很感激，如果有人可以解释我怎么能实现这一点。

这是我到目前为止有：

[https://codepen.io/sora1/pen/LZNZva][1] 

Answer 1

Se7ensky动画如何工作的原因是它使用标准的短划线动画技术，但剪辑动画笔划的轮廓代表手绘外观的标志。

所以标准短跑动画技术的工作原理如下。你把标准线：

<svg> 
 
    <path d="M 10,75 L 290,75" stroke="red" stroke-width="50"/> 
 
</svg>

然后你一个虚线样式添加到它和动画它的位置（stroke-dashoffset）。

.pen { 
 
    stroke-dasharray: 280 280; 
 
    stroke-dashoffset: 280; 
 
    animation-duration: 2s; 
 
    animation-name: draw; 
 
    animation-iteration-count: infinite; 
 
    animation-direction: alternate; 
 
    animation-timing-function: linear; 
 
} 
 

 
@keyframes draw { 
 
    from { 
 
    stroke-dashoffset: 280; 
 
    } 
 

 
    to { 
 
    stroke-dashoffset: 0; 
 
    } 
 
}

<svg> 
 
    <path class="pen" d="M 10,75 L 290,75" stroke="red" stroke-width="50"/> 
 
</svg>

最后得到Se7ensky例如花哨的可变冲程宽度，你剪辑您的标志的轮廓该行。

让我们假装下面这个简单的路径代表您的标志：

<svg> 
 
    <path stroke="black" stroke-width="1" fill="lightgrey" 
 
     d="M 40,50 
 
      C 110,55 195,60, 265,55 
 
      C 290,55 290,85 265,85 
 
      C 195,85 110,85 40,100 
 
      C 0,100 0,50 40,50 Z"/> 
 
</svg>

我们把它转换成一个clipPath元素，并用它来我们的动画中风修剪到我们的标志的形状：

.pen { 
 
    stroke-dasharray: 280 280; 
 
    stroke-dashoffset: 280; 
 
    animation-duration: 2s; 
 
    animation-name: draw; 
 
    animation-iteration-count: infinite; 
 
    animation-direction: alternate; 
 
    animation-timing-function: linear; 
 
} 
 

 
@keyframes draw { 
 
    from { 
 
    stroke-dashoffset: 280; 
 
    } 
 

 
    to { 
 
    stroke-dashoffset: 0; 
 
    } 
 
}

<svg> 
 
    <clipPath id="logo"> 
 
    <path d="M 40,50 
 
      C 110,55 195,60, 265,55 
 
      C 290,55 290,85 265,85 
 
      C 195,85 110,85 40,100 
 
      C 0,100 0,50 40,50 Z"/> 
 
    </clipPath> 
 
    
 
    <path class="pen" d="M 10,75 L 290,75" stroke="red" stroke-width="50" clip-path="url(#logo)"/> 
 
</svg>

因此，要复制他们的示例，您需要向SVG添加一个连续路径（或路径，如果您需要的话），该路径代表笔在您的徽标中书写字母时所需的路径。

然后使用dashoffset技术为该路径制作动画，同时将其用原始徽标剪裁。

---

更新

这里有一个更现实的字母形状的最终演示：

.pen { 
 
    fill: none; 
 
    stroke: red; 
 
    stroke-width: 18; 
 
    stroke-linecap: round; 
 
    clip-path: url(#logo); 
 

 
    stroke-dasharray: 206 206; 
 
    stroke-dashoffset: 206; 
 
    animation-duration: 2s; 
 
    animation-name: draw; 
 
    animation-iteration-count: infinite; 
 
    animation-direction: alternate; 
 
    animation-timing-function: linear; 
 
} 
 

 
@keyframes draw { 
 
    from { 
 
    stroke-dashoffset: 206; 
 
    } 
 

 
    to { 
 
    stroke-dashoffset: 0; 
 
    } 
 
}

<svg> 
 
    <defs> 
 
    <clipPath id="logo"> 
 
     <path d="m85.77 49.77c-10.59 8.017-27.38 21.95-41.58 21.95-6.396 0-12.99-2.481-12.39-9.735l0.3998-4.199c38.38-12.03 48.17-26.15 48.17-35.5 0-7.635-7.995-9.162-14.39-9.162-25.98-0.1909-54.97 25.39-54.17 50.39 0.3998 12.6 7.196 25.01 21.79 25.01 19.79 0 41.78-17.94 53.97-31.5zm-52.37-1.336c5.397-12.6 16.99-21.76 26.98-24.24 1.399-0.3818 2.399 0.7635 2.399 2.1 0.1999 3.245-11.79 16.42-29.38 22.14z"/> 
 
    </clipPath> 
 
    </defs> 
 
    
 
    <path d="m39.02 51.1c5.361-1.771 10.04-4.182 15.98-7.857 6.019-3.933 9.841-7.728 12.77-10.71 1.403-1.369 12.03-15.97-7.857-13.93-9.824 1.01-19.62 8.3-26.16 14.91-6.538 6.61-10.42 14.51-11.96 22.23-2.559 12.76 1.807 26.19 21.07 23.48 13.96-1.965 32.59-14.55 43.66-25.54" class="pen"/> 
 
</svg>

Answer 2

的例子看起来像SVG路径和延迟动画的结合。

本博客文章由CSS-技巧说明它非常好（注意，SVG必须有招这个工作）： https://css-tricks.com/svg-line-animation-works/

这里有中风dashoffset指导（在本例中使用）可能是有用的： https://css-tricks.com/almanac/properties/s/stroke-dashoffset/