如何使 SVG 动画无缝流畅？

Question

我给SVG做了动画，为了手写效果，我想让动画更无缝，因为动画中出现了字母"W"，它让字母的另一部分也出现了, 而且我无法减小笔画宽度，因为字母的其余部分不会完全显示，请指导我如何做。

由于我无法在此处上传代码，其 SVG 超过 35,000 个字符，因此请检查 CodePen。

HTML代码

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

代码笔：https://codepen.io/ToxifiedM/pen/MWKeERr

相关问题 3：

Answer 1

我会这样做：

我正在使用一个多段线元素，我正在使用类似 V 的路径进行剪裁。为了制作 W，我使用了两次剪裁折线。我正在为 use 元素的 stroke-dashoffset 设置动画，第二个元素延迟 1s

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>

如何使 SVG 动画无缝流畅？

How can I make the SVG animation seamless and smooth?

html

css

jquery

svg

svg-animate