svg路径填充动画

2024-04-29 • 问答

我正在尝试实现类似以下gif的svg路径填充动画，尝试了clipPath，但是没有运气，没有任何帮助，请问如何实现这种动画（见下面的gif图片）？尝试过gsap或任何svg动画库，但都不满足我的需求。

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 263.42 187.39">
<defs>
<clipPath id="clip1">
<path class="cls-1" fill="#c2a01e" d="M1889.36,77.11v3.47L1853,111.81q-10.32,2.86-21.35,7.09l-5.2,2c-8.68-2.49-17.65-5-26.73-7.37l90.6-109.08L1891.48,3V0H1737.59V4.49h0V51.65h2.23V48.17l50.94-43.68h44l-82.46,99.29-4,4.76c25.65,2.89,53.48,10.52,78.8,17.75l5.2-2c22.16-8.58,42.53-12.81,59.26-13.69V77.11Z" transform="translate(-1677.9)"/>
</clipPath>
<clipPath id="clip2">
<path class="cls-1" fill="#c2a01e" d="M1932.74,126.17c-13.82-10.71-52.11-11.68-98.2,6.14l-5.19,2c-53.78-15.35-118.75-32.47-150.47-2.43a3.15,3.15,0-1,2.51v0a2.32,2.32,3.67,1.69c24.48-17.77,57.75-16.76,132.38,4.48l-1.75.75c-8.06,3.49-21,9.57-34.68,15.79-20.34-9.54-48.19-17.44-66.13-6.65-26.21,15.75-19.06,51.2,38.47,30.66,8.47-3,48.84-21.17,83-35,2.93.89,5.92,1.79,9,2.73,16.51,5.06,38.3,8.93,57.55,10.6C1945.4,163.47,1948.48,138.37,1932.74,126.17ZM1712,157.37c15.48-11.94,39.91-5.59,58.83,2.82-6.94,3.12-13.89,6.17-20.3,8.84C1699.64,190.21,1697.33,168.67,1712,157.37Zm149.51-14c-4.11-1.09-8.38-2.27-12.78-3.51,9.34-3.58,17.56-6.5,23.64-8.22,29.63-8.41,58.5-3.24,61,6.19C1936.54,149.74,1912.3,156.79,1861.48,143.37Z" transform="translate(-1677.9)"/>
</clipPath>
</defs>
<path class="cls-1" fill="#FFF" clip-path="url(#clip1)" transform="translate(-1677.9)"/>
<path class="cls-1" fill="#FFF" clip-path="url(#clip2)" transform="translate(-1677.9)"/>
</svg>

通常的思路是：绘制所需的剪切路径，然后为剪切路径的stroke-dashoffset设置动画。您确保下一个路径的动画在上一个结束后开始：begin="a.end + .5s"。

但是，在这种情况下，您将需要重写路径。例如，在花边的情况下，我将使用2条路径和2条不同的剪切路径，甚至3条。否则，在路径重叠的地方会产生不美观的出血效果。

<svg viewBox="0 0 500 500">
<defs>
  <clipPath id="theZ">
	<path d="M401.374,215.788v6.586l-69.015,59.278c-13.06,3.619-26.567,8.105-40.525,13.457l-9.869,3.797
		c-16.477-4.727-33.502-9.49-50.737-13.989L403.196,77.872l2.202-2.752v-5.694h-292.1v8.522l0,0v89.515h4.232v-6.605l96.69-82.91
		h83.517L141.219,266.41l-7.592,9.035c48.687,5.486,101.511,19.969,149.57,33.691l9.871-3.796
		c42.062-16.286,80.727-24.315,112.481-25.985v-63.567H401.374z"/>
  </clipPath>
  <clipPath id="theLace">
	<path d="M483.714,308.909c-26.231-20.329-98.91-22.17-186.394,11.654l-9.852,3.796
		c-102.081-29.135-225.4-61.631-285.608-4.611c-1.316,1.222-2.013,2.971-1.898,4.764l0,0c0.201,2.424,2.328,4.227,4.751,4.025
		c0.799-0.065,1.565-0.348,2.215-0.817c46.466-33.729,109.616-31.812,251.271,8.503l-3.321,1.424
		c-15.298,6.625-39.86,18.165-65.826,29.971c-38.607-18.107-91.47-33.103-125.522-12.621c-49.75,29.895-36.178,97.183,73.02,58.195
		c16.077-5.694,92.704-40.184,157.544-66.434c5.561,1.689,11.236,3.397,17.082,5.182c31.338,9.604,72.698,16.95,109.236,20.12C507.744,379.709,513.591,332.066,483.714,308.909z M64.726,368.131c29.383-22.664,75.753-10.611,111.666,5.352
		c-13.173,5.923-26.365,11.712-38.531,16.779C41.265,430.464,36.88,389.579,64.726,368.131z M348.512,341.557
		c-7.801-2.068-15.906-4.309-24.258-6.662c17.729-6.795,33.331-12.338,44.871-15.603c56.241-15.963,111.04-6.149,115.785,11.749
		c6.017,22.607-39.993,35.988-136.455,10.516H348.512z"/>
    </clipPath>
</defs>

	<path fill="none" stroke="#C2A01E" clip-path="url(#theLace)" stroke-width="25" stroke-dasharray="1206" stroke-dashoffset="1206" d="M-0.038,324.512c0,49.523-27.071,69.538-27.012		c23.35,0.069,74.84,1.785,121.646,11.637C242.583,319.965,288.5,338.5,338.5s134.99,34.916,169,27s36.999-16.612,35-33.425
		s-44.115-67.954-226,12.425s-172,69-172,69s-52.867,8.077-52-16s7.277-37.219,43.205-46.984c38.84-10.557,110.17,30.986,30.986" >
     <animate id="a" 
       attributeName="stroke-dashoffset"
       attributeType="XML"
       from="1206" to="0"
       dur="1s"
       fill="freeze"
       repeatCount="1"/>
  </path>
	<path fill="none" stroke="#C2A01E" d="M259.424,309.137V64.778"  clip-path="url(#theZ)" stroke-width="300" stroke-dasharray="244.36" stroke-dashoffset="244.36">
    <animate 
       attributeName="stroke-dashoffset"
       attributeType="XML"
       begin="a.end + .5s"
       from="244.36" to="0"
       dur="1s"
       fill="freeze"
       repeatCount="1"
             />
  </path>
</svg>

svg路径填充动画

wangjingjun2007 回答：svg路径填充动画

大家都在问