How can I make the SVG animation seamless and smooth?

问题

I have animated the SVG, to give a handwriting effect, I want to make the animation more seamless, as the letter "W" appears in the animation, it makes the other part of the letter appear as well, and I can't decrease the stroke-width as the rest of the part of the letter will not appear completely, please guide me along on what can be done.

As I cant upload the code here its SVG and exceeding more than 35,000 characters, so please do check the CodePen.

HTML Code

<defs>
    <clipPath id="clip-path" transform="translate(0 0)">
        <path id="w" d="M47.205,44.721c-.1.062-.191.119-.262.169a1.172,1.172,0,0,0-.192.17,1.237,1.237,0,0,0-.155.208,1.71,1.71,0,0,0-.13.285L42.677,55.6q-.354-.956-.708-1.9-.307-.8-.655-1.694t-.623-1.6L38.8,55.6Q37.7,52.9,36.825,50.73q-.37-.925-.739-1.818c-.247-.6-.467-1.134-.662-1.618s-.357-.883-.485-1.2-.2-.508-.223-.57a1.835,1.835,0,0,0-.293-.47,1.326,1.326,0,0,0-.539-.332H36.7a.519.519,0,0,0-.355.4.832.832,0,0,0,.093.539l2.836,7.18,1.077-3.3q-.215-.57-.493-1.247t-.532-1.279c-.17-.4-.313-.747-.432-1.04s-.187-.464-.208-.516a1.529,1.529,0,0,0-.223-.409,1.143,1.143,0,0,0-.532-.332h2.711a.5.5,0,0,0-.315.4,1.016,1.016,0,0,0,.07.539l.817,2.033.8-2.2a.886.886,0,0,0,.068-.479q-.039-.2-.347-.293h1.633a2.841,2.841,0,0,0-.254.17,1.007,1.007,0,0,0-.169.161,1.148,1.148,0,0,0-.124.185,2.582,2.582,0,0,0-.116.254l-1.155,3.034,1.556,4.313L45.652,45.6a1.01,1.01,0,0,0,.062-.533.513.513,0,0,0-.355-.346h1.849Z" style="fill: none" />
    </clipPath>
</defs>

<g id="w-grp">
    <g style="clip-path: url(#clip-path)">
        <polyline class="logo-path m-1" id="w-path" points="35.084 43.989 39.663 55.599 38.796 55.599 38.609 55.136 42.916 43.989 38.968 43.989 43.484 55.599 42.677 55.597 42.474 55.101 46.67 43.989" style="fill: none;stroke: #191717;stroke-miterlimit: 10;stroke-width: 3px" />
    </g>
</g>

CodePen: https://codepen.io/ToxifiedM/pen/MWKeERr

Linked Question 1: A JQuery Function For SVG, To Execute 2nd Animation As Soon As, 1st Animation Completes?

Linked Question 2: To Control SVG CSS Based Animation Using Jquery?

Linked Question 3: To Control The Speed Of Multiple SVG Elements Using Jquery?

回答1:

This is how I would do it:

I'm using a polyline element that I am clipping with a V like path. In order to make the W I'm using the clipped polyline twice. I am animating the stroke-dashoffset of the use elements, the second element with a 1s delay

svg{width:300px;border:solid}

use{
  stroke-dasharray: 255;
  stroke-dashoffset: 255;
   animation: dash 1s linear forwards;
}
use:nth-of-type(2){
 animation-delay:1s
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

<svg viewBox="30 80 250 150">
  <defs>  
  <clipPath id="clip">
  <path id="V" xmlns="http://www.w3.org/2000/svg" d="M52,90L103,210 110,210 160,90 152,90  110,190 66,90 52,90" stroke="black" fill="none" />
  </clipPath>
  
  <polyline id="poly" points="58,85 107,203 156,85" stroke="red" fill="none" stroke-width="19" clip-path="url(#clip)" />
  
  </defs>
  
  <use xlink:href="#poly" x="0" />
  <use xlink:href="#poly" x="50" />
  

</svg>

来源：https://stackoverflow.com/questions/62245574/how-can-i-make-the-svg-animation-seamless-and-smooth

标签

html

jquery

css

svg

svg-animate