如何使用SVG在网页上动画手写文本？ [英] How to animate handwriting text on the web page using SVG?

问题描述

我正在尝试为我创建并保存为SVG的文本设置动画。到目前为止，我只能动画的中风，但它不是我想要的achive。
这里是我需要的示例的链接：

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

我真的很感激，如果有人能解释如何实现这个。

这是我到目前为止：

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

解决方案

Se7ensky动画的工作原理是使用标准的dash动画技术，

因此，标准短线动画技术的工作原理如下。您采用标准行：

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

div

然后你添加一个破折号模式，并将它的位置（ 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; }到{stroke-dashoffset：0; }}  

 < svg& < path class =pend =M 10,75 L 290,75stroke =redstroke-width =50/>< svg>  

最后，为了获得Se7ensky示例的花哨可变笔触宽度，您需要使用徽标轮廓线。

所以让我们假设这个简单的路径代表你的标志：

 < svg> < path stroke =blackstroke-width =1fill =lightgreyd =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; }到{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 =pend =M 10,75 L 290,75stroke =redstroke-width =50clip-path =url（#logo）/>< svg&  

为了复制他们的例子，连续路径（如果你想要的话）到你的SVG，代表笔在你的标志中写字母的路径。

使用dashoffset技术，同时使用您的原始徽标剪切它。

I am trying to animate a text that I created and saved as SVG. So far I was able to animate the stroke only, but it is not what I am trying to achive. Here is the link to the example what I need:

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

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

I will really appreciate if some one can explain how I Can implement this.

Here is what I have so far:

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

解决方案

How the Se7ensky animation works is that it uses the standard dash animation technique, but clips the animated stroke with an outline representing the hand-drawn look of the logo.

So the standard dash animation technique works as follows. You take a standard line:

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

Then you add a dash pattern to it and animate it's position (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>

Finally to get the fancy variable stroke width of the Se7ensky example, you clip that line with the outline of your logo.

So let's pretend this simple path below represents your logo:

<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>

We turn that into a clipPath element and use it to trim our animated stroke to the shape of our logo:

.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>

So to replicate their example, you'll need to add a continuous path (or paths if you want) to your SVG that represents the path that a pen would take if it were writing the letters in your logo.

Then animate that path using the dashoffset technique while clipping it with your original logo.

这篇关于如何使用SVG在网页上动画手写文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！