如何使 SVG 动画无缝流畅？

Posted 2023-05-08

【中文标题】如何使 SVG 动画无缝流畅？

【英文标题】：How can I make the SVG animation seamless and smooth?

【发布时间】：2020-09-26 10:40:35

【问题描述】：

我已经为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

相关问题 1：A JQuery Function For SVG, To Execute 2nd Animation As Soon As, 1st Animation Completes?

相关问题 2：To Control SVG CSS Based Animation Using Jquery?

相关问题3：To Control The Speed Of Multiple SVG Elements Using Jquery?

【参考方案1】：

我会这样做：

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

svgwidth: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- clip-path="url(#clip)" />
  
  </defs>
  
  <use xlink:href="#poly" x="0" />
  <use xlink:href="#poly" x="50" />
  

</svg>

【讨论】：

嘿，@enxaneta，我应用了你的技术，但我必须在它相交的任何地方剪切对象，并绘制一条路径并将其转换为剪贴蒙版，给路径一个笔划宽度，你的解决方案给出了我做了一个简短的想法，由于字体太复杂，我花了很多时间，你可以在这里检查笔。 codepen.io/ToxifiedM/pen/mdVeJxW，我在想是否有什么方法可以在第一个动画完成时开始第二个动画，并且它只是继续为动画提供更流畅的效果和完美的时机，实现 jquery？

好笔！您可以在不同的问题中提出所有这些问题。

谢谢 enxaneta，我现在就做 :)