动画不规则 SVG 填充路径
Animate irregular SVG fill path
我正在尝试根据视频游戏《奇异人生》制作一个简洁的小动画。到目前为止，我至少能够在一定程度上模拟 in-game text animation，但我还停留在第二部分。
我想要做的是使这个螺旋从 "full" 到 "empty" 的动画沿着螺旋路径 like the in-game original.
运动
鉴于这是，
- 不使用笔划，并且
- 正在使用
d 路径，
你会如何创作这个动画？我对 SVG 的操作和动画处理相当陌生，所以到目前为止我能想到的只是 SVG.js and Vivus，这两个都不起作用（SVG.js 因为它是 d 路径， Vivus 因为它没有使用 stroke).
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 227.3 209.5">
<path id="Spiral" d="M81.4,68.2c-0.4,8.5,1.7,16.4,6.7,23.3c4.6,6.4,10.8,11.1,18.1,14.3c4.6,2,9.4,3.7,14.5,3.9 c6.4,0.2,12.8-0.3,18.2-3.9c6.6-4.3,12.1-9.6,14.6-17.4c0.8-2.5,2.1-4.8,2.4-7.5c0.5-4.2-0.1-8.2-1.7-12.1 c-4.1-9.6-10.8-16.8-20.8-20.2c-11.6-4-22.9-3-33.1,4.5c-4.4,3.2-7.2,7.6-8.4,12.9c-0.5,2.2-1.3,4.3-1.4,6.5 c-0.2,7.4,2.5,13.6,7.8,18.7c7.3,7.1,16,9.4,25.6,6.9c9.3-2.4,13.8-9.7,13-19.3c-0.7-8.7-6.2-14.9-15.1-17.5c-2.4-0.7-4.9-1.5-7.5-1 c-3.1,0.6-5.5,2.3-6.9,5.2c-3.8,8.3,0.7,17.3,9.4,19.2c4.1,0.9,8.4-1.5,9.9-5.5c0.4-1.1,0.8-2.2,1.1-3.4c0.5-2.1-0.4-3.3-2.6-3.5 c-2-0.1-3.9,0-5.9,0.2c-1.4,0.2-2.1,1.5-1.6,2.9c0.4,1.1,1.1,1.9,1.8,2.8c0.5,0.6,0.9,1.2,0.3,1.9c-0.6,0.7-1.3,1-2.2,0.7 c-0.5-0.2-1-0.5-1.4-0.9c-1.2-1.3-2-2.8-2.4-4.5c-0.6-2.2,1.4-5,3.9-5.7c2.7-0.7,5.6-1.2,8.4-0.8c3.5,0.4,5.4,2.6,5.3,6.1 c-0.1,4.6-2.3,8.2-5.5,11c-2.8,2.5-6.5,3-10,2c-6.8-1.8-11.7-6.1-13.5-13.1c-1.5-5.8,1.2-13.9,8.1-17.2c2.6-1.2,5.2-1,7.9-0.8 c6.2,0.4,11.2,3.4,15.7,7.5c3.8,3.6,5.6,8.2,6.3,13.2c0.5,3.2,0.1,6.3-0.6,9.4c-1.2,5.7-5.1,9.4-9.8,12.3c-3.5,2.2-7.4,3-11.4,3.1 c-9,0.3-16.8-2.8-23.3-8.9c-4.5-4.2-6.7-9.6-7.9-15.4c-2.7-13,6-27.1,15.7-31.3c19.5-8.4,38.4-3.2,50.4,13c3.6,4.9,5.6,10.6,6,16.7 c0.3,4.6-0.8,9.1-2.7,13.3c-3,6.7-7.4,12.5-13.2,17c-5.7,4.5-12.3,6.2-19.6,6.5c-10.1,0.3-19-2.9-27.2-8.6c-4-2.8-7.8-5.8-10.9-9.6 c-4.7-5.7-6.9-12.4-7.8-19.7c-0.5-4-0.8-8-0.5-12.1c0.6-8.2,3.4-15.6,8.6-22c5.2-6.5,11.3-11.8,18.8-15.5c1.6-0.8,3.3-1.3,5-1.7 c0.4-0.1,0.8-0.1,0.9-0.8c0.4-4.5,4.8-8.1,10.6-7.3c3.9,0.5,5.8,2.8,5.7,6.7c0,1.1,0.4,1.5,1.3,1.8c5.9,2,11.6,4.6,16.5,8.5 c4.2,3.3,8.7,6.2,12.4,10c4.1,4.2,7.9,8.6,11.6,13.1c3.5,4.3,4.8,9.5,5.7,14.8c1.3,7.3-0.4,14.2-2.3,21.1 c-2.1,7.8-5.7,15.1-10.1,21.9c-4.1,6.2-9.9,10.6-16.7,13.7c-2.7,1.2-5.6,1.4-8.5,1.8c-5.1,0.6-10.2,0.7-15.3-0.2 c-12.6-2.2-24.7-5.8-36.2-11.7c-7.7-3.9-14.3-9-20-15.4c-3.1-3.5-5.1-7.9-7.5-11.8c-4.4-7.2-5.9-15.1-5.8-23.3 c0.1-7.2,2.4-13.8,5.6-20.2c2-3.9,4.1-7.7,6.2-11.5c1-1.8,2.4-3.3,3.8-4.7c1.4-1.4,2.8-2.7,4.2-4.1c0.5-0.4,1-0.8,1.6-1.1 c0.9-0.4,1.7-0.3,2.3,0.6c0.6,0.9,0.4,1.6-0.3,2.2c-0.7,0.6-1.5,1.2-2.2,1.9c-3.8,3.3-6.7,7.3-9,11.8c-2.9,5.7-5.9,11.2-7.5,17.5 c-2.3,8.8-1.4,17.4,2.3,25.6c2.6,5.8,6,11.2,10.1,16.1c4.4,5.2,9.7,9.1,15.8,12.1c9.4,4.6,19,8.7,29.2,11.1 c7.6,1.8,15.4,2.4,23.2,1.6c6-0.6,10.9-3.6,15.6-7.2c3-2.3,5.3-5.1,7.1-8.3c3.3-5.8,6.6-11.5,8.5-17.9c1.5-5.2,2.9-10.5,2.8-16 c-0.1-3-0.4-5.9-1-8.8c-0.8-4-2.9-7.2-5.3-10.4c-5.2-7-11.8-12.6-18.2-18.4c-5.5-4.9-12-8-18.8-10.6c-0.3-0.1-0.7-0.2-1-0.3 c-0.5-0.2-0.9-0.2-1.2,0.5c-0.7,2-2.2,3-4.3,3.3c-2.2,0.3-4.4,0.3-6.5-0.6c-1.6-0.7-2.8-1.7-3.5-3.2c-0.2-0.5-0.5-0.7-1.1-0.5 c-12.1,5-21.5,12.7-27.2,24.7c-1.4,3-1.7,6.3-2,9.6C81.6,63.9,81.5,66,81.4,68.2z M124.5,23.5c0.1-2.1-0.5-3.1-1.8-3.8 c-2.3-1.2-5.5-0.6-7.2,1.3c-1.8,2.1-2.1,6,1.8,7.4c0.9,0.3,1.8,0.5,2.8,0.7c1.4,0.2,2.3-0.3,3-1.4C124,26.3,124.4,24.6,124.5,23.5z" />
</svg>
一种简单的方法是使用描边版本遮盖您的路径，您将从中为描边-破折号偏移设置动画。
由于您的路径很脏，因此很难以编程方式进行此操作，因此我使用专用软件手动快速进行了此操作，但请随时进行改进：
polyline {
fill: none;
stroke: white;
stroke-width: 10px;
stroke-dasharray: 824px 824px;
stroke-dashoffset: 0px;
animation: stroke 5s linear forwards;
}
:checked ~ svg polyline {
animation: none;
}
:checked ~ svg polyline,
:hover polyline {
stroke: red;
opacity: 0.9;
}
@keyframes stroke {
0% {stroke-dashoffset: 0;}
100% {stroke-dashoffset: -824px}
}
<label> disable animation</label><input type="checkbox">
<br><span>hover over the frame to change stroke color</span>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 227.3 209.5">
<path id="Spiral" d="M81.4,68.2c-0.4,8.5,1.7,16.4,6.7,23.3c4.6,6.4,10.8,11.1,18.1,14.3c4.6,2,9.4,3.7,14.5,3.9 c6.4,0.2,12.8-0.3,18.2-3.9c6.6-4.3,12.1-9.6,14.6-17.4c0.8-2.5,2.1-4.8,2.4-7.5c0.5-4.2-0.1-8.2-1.7-12.1 c-4.1-9.6-10.8-16.8-20.8-20.2c-11.6-4-22.9-3-33.1,4.5c-4.4,3.2-7.2,7.6-8.4,12.9c-0.5,2.2-1.3,4.3-1.4,6.5 c-0.2,7.4,2.5,13.6,7.8,18.7c7.3,7.1,16,9.4,25.6,6.9c9.3-2.4,13.8-9.7,13-19.3c-0.7-8.7-6.2-14.9-15.1-17.5c-2.4-0.7-4.9-1.5-7.5-1 c-3.1,0.6-5.5,2.3-6.9,5.2c-3.8,8.3,0.7,17.3,9.4,19.2c4.1,0.9,8.4-1.5,9.9-5.5c0.4-1.1,0.8-2.2,1.1-3.4c0.5-2.1-0.4-3.3-2.6-3.5 c-2-0.1-3.9,0-5.9,0.2c-1.4,0.2-2.1,1.5-1.6,2.9c0.4,1.1,1.1,1.9,1.8,2.8c0.5,0.6,0.9,1.2,0.3,1.9c-0.6,0.7-1.3,1-2.2,0.7 c-0.5-0.2-1-0.5-1.4-0.9c-1.2-1.3-2-2.8-2.4-4.5c-0.6-2.2,1.4-5,3.9-5.7c2.7-0.7,5.6-1.2,8.4-0.8c3.5,0.4,5.4,2.6,5.3,6.1 c-0.1,4.6-2.3,8.2-5.5,11c-2.8,2.5-6.5,3-10,2c-6.8-1.8-11.7-6.1-13.5-13.1c-1.5-5.8,1.2-13.9,8.1-17.2c2.6-1.2,5.2-1,7.9-0.8 c6.2,0.4,11.2,3.4,15.7,7.5c3.8,3.6,5.6,8.2,6.3,13.2c0.5,3.2,0.1,6.3-0.6,9.4c-1.2,5.7-5.1,9.4-9.8,12.3c-3.5,2.2-7.4,3-11.4,3.1 c-9,0.3-16.8-2.8-23.3-8.9c-4.5-4.2-6.7-9.6-7.9-15.4c-2.7-13,6-27.1,15.7-31.3c19.5-8.4,38.4-3.2,50.4,13c3.6,4.9,5.6,10.6,6,16.7 c0.3,4.6-0.8,9.1-2.7,13.3c-3,6.7-7.4,12.5-13.2,17c-5.7,4.5-12.3,6.2-19.6,6.5c-10.1,0.3-19-2.9-27.2-8.6c-4-2.8-7.8-5.8-10.9-9.6 c-4.7-5.7-6.9-12.4-7.8-19.7c-0.5-4-0.8-8-0.5-12.1c0.6-8.2,3.4-15.6,8.6-22c5.2-6.5,11.3-11.8,18.8-15.5c1.6-0.8,3.3-1.3,5-1.7 c0.4-0.1,0.8-0.1,0.9-0.8c0.4-4.5,4.8-8.1,10.6-7.3c3.9,0.5,5.8,2.8,5.7,6.7c0,1.1,0.4,1.5,1.3,1.8c5.9,2,11.6,4.6,16.5,8.5 c4.2,3.3,8.7,6.2,12.4,10c4.1,4.2,7.9,8.6,11.6,13.1c3.5,4.3,4.8,9.5,5.7,14.8c1.3,7.3-0.4,14.2-2.3,21.1 c-2.1,7.8-5.7,15.1-10.1,21.9c-4.1,6.2-9.9,10.6-16.7,13.7c-2.7,1.2-5.6,1.4-8.5,1.8c-5.1,0.6-10.2,0.7-15.3-0.2 c-12.6-2.2-24.7-5.8-36.2-11.7c-7.7-3.9-14.3-9-20-15.4c-3.1-3.5-5.1-7.9-7.5-11.8c-4.4-7.2-5.9-15.1-5.8-23.3 c0.1-7.2,2.4-13.8,5.6-20.2c2-3.9,4.1-7.7,6.2-11.5c1-1.8,2.4-3.3,3.8-4.7c1.4-1.4,2.8-2.7,4.2-4.1c0.5-0.4,1-0.8,1.6-1.1 c0.9-0.4,1.7-0.3,2.3,0.6c0.6,0.9,0.4,1.6-0.3,2.2c-0.7,0.6-1.5,1.2-2.2,1.9c-3.8,3.3-6.7,7.3-9,11.8c-2.9,5.7-5.9,11.2-7.5,17.5 c-2.3,8.8-1.4,17.4,2.3,25.6c2.6,5.8,6,11.2,10.1,16.1c4.4,5.2,9.7,9.1,15.8,12.1c9.4,4.6,19,8.7,29.2,11.1 c7.6,1.8,15.4,2.4,23.2,1.6c6-0.6,10.9-3.6,15.6-7.2c3-2.3,5.3-5.1,7.1-8.3c3.3-5.8,6.6-11.5,8.5-17.9c1.5-5.2,2.9-10.5,2.8-16 c-0.1-3-0.4-5.9-1-8.8c-0.8-4-2.9-7.2-5.3-10.4c-5.2-7-11.8-12.6-18.2-18.4c-5.5-4.9-12-8-18.8-10.6c-0.3-0.1-0.7-0.2-1-0.3 c-0.5-0.2-0.9-0.2-1.2,0.5c-0.7,2-2.2,3-4.3,3.3c-2.2,0.3-4.4,0.3-6.5-0.6c-1.6-0.7-2.8-1.7-3.5-3.2c-0.2-0.5-0.5-0.7-1.1-0.5 c-12.1,5-21.5,12.7-27.2,24.7c-1.4,3-1.7,6.3-2,9.6C81.6,63.9,81.5,66,81.4,68.2z M124.5,23.5c0.1-2.1-0.5-3.1-1.8-3.8 c-2.3-1.2-5.5-0.6-7.2,1.3c-1.8,2.1-2.1,6,1.8,7.4c0.9,0.3,1.8,0.5,2.8,0.7c1.4,0.2,2.3-0.3,3-1.4C124,26.3,124.4,24.6,124.5,23.5z" />
<polyline id="mask" points="77.2,26.1 53.2,56.4
54.5,84.4 69.6,103.9 95.8,119.9 128.7,128.3 148.2,123.6 159.5,109.5 166.5,95.8 172.1,78.1 168,56.2 132.9,28.8 124.9,26.3
120.5,16.9 113.5,20.7 122.7,28.5 112.7,28 105.2,26.5 86.1,45.8 80.6,67.9 82.4,82.2 87.9,93.2 100.1,103.9 116.6,109.7 133.1,111
143.6,103.9 150.7,92.7 157,79.2 153.9,61.3 136,50 127.1,45.3 113.7,46.1 99.2,51.9 88.7,72.7 96.3,88.5 105.9,96.1 123.8,101
131.9,97.1 138.5,89.4 140,77.3 135.3,65.9 127.7,61.8 107.9,59.5 102.4,69.9 101.5,76.1 116.8,84.3 123.3,85.1 128.2,79.2
129.1,74 124.8,70 117.7,69.5 114.6,72.7 114.6,77.1 119.5,79.9 "/>
</svg>
如果你需要透明度而不是像我一样的白色黑客，那么你可以使用 :
svg {
background: lime;
}
polyline {
fill: none;
stroke: white;
stroke-width: 10px;
stroke-dasharray: 824px 824px;
stroke-dashoffset: 0px;
animation: stroke 5s linear forwards;
}
@keyframes stroke {
0% {stroke-dashoffset: 0;}
100% {stroke-dashoffset: -824px}
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 227.3 209.5">
<defs>
<mask id="mask">
<polyline points="77.2,26.1 53.2,56.4
54.5,84.4 69.6,103.9 95.8,119.9 128.7,128.3 148.2,123.6 159.5,109.5 166.5,95.8 172.1,78.1 168,56.2 132.9,28.8 124.9,26.3
120.5,16.9 113.5,20.7 122.7,28.5 112.7,28 105.2,26.5 86.1,45.8 80.6,67.9 82.4,82.2 87.9,93.2 100.1,103.9 116.6,109.7 133.1,111
143.6,103.9 150.7,92.7 157,79.2 153.9,61.3 136,50 127.1,45.3 113.7,46.1 99.2,51.9 88.7,72.7 96.3,88.5 105.9,96.1 123.8,101
131.9,97.1 138.5,89.4 140,77.3 135.3,65.9 127.7,61.8 107.9,59.5 102.4,69.9 101.5,76.1 116.8,84.3 123.3,85.1 128.2,79.2
129.1,74 124.8,70 117.7,69.5 114.6,72.7 114.6,77.1 119.5,79.9 "/>
</mask>
</defs>
<path mask="url(#mask)" id="Spiral" d="M81.4,68.2c-0.4,8.5,1.7,16.4,6.7,23.3c4.6,6.4,10.8,11.1,18.1,14.3c4.6,2,9.4,3.7,14.5,3.9 c6.4,0.2,12.8-0.3,18.2-3.9c6.6-4.3,12.1-9.6,14.6-17.4c0.8-2.5,2.1-4.8,2.4-7.5c0.5-4.2-0.1-8.2-1.7-12.1 c-4.1-9.6-10.8-16.8-20.8-20.2c-11.6-4-22.9-3-33.1,4.5c-4.4,3.2-7.2,7.6-8.4,12.9c-0.5,2.2-1.3,4.3-1.4,6.5 c-0.2,7.4,2.5,13.6,7.8,18.7c7.3,7.1,16,9.4,25.6,6.9c9.3-2.4,13.8-9.7,13-19.3c-0.7-8.7-6.2-14.9-15.1-17.5c-2.4-0.7-4.9-1.5-7.5-1 c-3.1,0.6-5.5,2.3-6.9,5.2c-3.8,8.3,0.7,17.3,9.4,19.2c4.1,0.9,8.4-1.5,9.9-5.5c0.4-1.1,0.8-2.2,1.1-3.4c0.5-2.1-0.4-3.3-2.6-3.5 c-2-0.1-3.9,0-5.9,0.2c-1.4,0.2-2.1,1.5-1.6,2.9c0.4,1.1,1.1,1.9,1.8,2.8c0.5,0.6,0.9,1.2,0.3,1.9c-0.6,0.7-1.3,1-2.2,0.7 c-0.5-0.2-1-0.5-1.4-0.9c-1.2-1.3-2-2.8-2.4-4.5c-0.6-2.2,1.4-5,3.9-5.7c2.7-0.7,5.6-1.2,8.4-0.8c3.5,0.4,5.4,2.6,5.3,6.1 c-0.1,4.6-2.3,8.2-5.5,11c-2.8,2.5-6.5,3-10,2c-6.8-1.8-11.7-6.1-13.5-13.1c-1.5-5.8,1.2-13.9,8.1-17.2c2.6-1.2,5.2-1,7.9-0.8 c6.2,0.4,11.2,3.4,15.7,7.5c3.8,3.6,5.6,8.2,6.3,13.2c0.5,3.2,0.1,6.3-0.6,9.4c-1.2,5.7-5.1,9.4-9.8,12.3c-3.5,2.2-7.4,3-11.4,3.1 c-9,0.3-16.8-2.8-23.3-8.9c-4.5-4.2-6.7-9.6-7.9-15.4c-2.7-13,6-27.1,15.7-31.3c19.5-8.4,38.4-3.2,50.4,13c3.6,4.9,5.6,10.6,6,16.7 c0.3,4.6-0.8,9.1-2.7,13.3c-3,6.7-7.4,12.5-13.2,17c-5.7,4.5-12.3,6.2-19.6,6.5c-10.1,0.3-19-2.9-27.2-8.6c-4-2.8-7.8-5.8-10.9-9.6 c-4.7-5.7-6.9-12.4-7.8-19.7c-0.5-4-0.8-8-0.5-12.1c0.6-8.2,3.4-15.6,8.6-22c5.2-6.5,11.3-11.8,18.8-15.5c1.6-0.8,3.3-1.3,5-1.7 c0.4-0.1,0.8-0.1,0.9-0.8c0.4-4.5,4.8-8.1,10.6-7.3c3.9,0.5,5.8,2.8,5.7,6.7c0,1.1,0.4,1.5,1.3,1.8c5.9,2,11.6,4.6,16.5,8.5 c4.2,3.3,8.7,6.2,12.4,10c4.1,4.2,7.9,8.6,11.6,13.1c3.5,4.3,4.8,9.5,5.7,14.8c1.3,7.3-0.4,14.2-2.3,21.1 c-2.1,7.8-5.7,15.1-10.1,21.9c-4.1,6.2-9.9,10.6-16.7,13.7c-2.7,1.2-5.6,1.4-8.5,1.8c-5.1,0.6-10.2,0.7-15.3-0.2 c-12.6-2.2-24.7-5.8-36.2-11.7c-7.7-3.9-14.3-9-20-15.4c-3.1-3.5-5.1-7.9-7.5-11.8c-4.4-7.2-5.9-15.1-5.8-23.3 c0.1-7.2,2.4-13.8,5.6-20.2c2-3.9,4.1-7.7,6.2-11.5c1-1.8,2.4-3.3,3.8-4.7c1.4-1.4,2.8-2.7,4.2-4.1c0.5-0.4,1-0.8,1.6-1.1 c0.9-0.4,1.7-0.3,2.3,0.6c0.6,0.9,0.4,1.6-0.3,2.2c-0.7,0.6-1.5,1.2-2.2,1.9c-3.8,3.3-6.7,7.3-9,11.8c-2.9,5.7-5.9,11.2-7.5,17.5 c-2.3,8.8-1.4,17.4,2.3,25.6c2.6,5.8,6,11.2,10.1,16.1c4.4,5.2,9.7,9.1,15.8,12.1c9.4,4.6,19,8.7,29.2,11.1 c7.6,1.8,15.4,2.4,23.2,1.6c6-0.6,10.9-3.6,15.6-7.2c3-2.3,5.3-5.1,7.1-8.3c3.3-5.8,6.6-11.5,8.5-17.9c1.5-5.2,2.9-10.5,2.8-16 c-0.1-3-0.4-5.9-1-8.8c-0.8-4-2.9-7.2-5.3-10.4c-5.2-7-11.8-12.6-18.2-18.4c-5.5-4.9-12-8-18.8-10.6c-0.3-0.1-0.7-0.2-1-0.3 c-0.5-0.2-0.9-0.2-1.2,0.5c-0.7,2-2.2,3-4.3,3.3c-2.2,0.3-4.4,0.3-6.5-0.6c-1.6-0.7-2.8-1.7-3.5-3.2c-0.2-0.5-0.5-0.7-1.1-0.5 c-12.1,5-21.5,12.7-27.2,24.7c-1.4,3-1.7,6.3-2,9.6C81.6,63.9,81.5,66,81.4,68.2z M124.5,23.5c0.1-2.1-0.5-3.1-1.8-3.8 c-2.3-1.2-5.5-0.6-7.2,1.3c-1.8,2.1-2.1,6,1.8,7.4c0.9,0.3,1.8,0.5,2.8,0.7c1.4,0.2,2.3-0.3,3-1.4C124,26.3,124.4,24.6,124.5,23.5z" />
</svg>
我正在尝试根据视频游戏《奇异人生》制作一个简洁的小动画。到目前为止，我至少能够在一定程度上模拟 in-game text animation，但我还停留在第二部分。
我想要做的是使这个螺旋从 "full" 到 "empty" 的动画沿着螺旋路径 like the in-game original.
运动
鉴于这是，
- 不使用笔划，并且
- 正在使用
d路径，
你会如何创作这个动画？我对 SVG 的操作和动画处理相当陌生，所以到目前为止我能想到的只是 SVG.js and Vivus，这两个都不起作用（SVG.js 因为它是 d 路径， Vivus 因为它没有使用 stroke).
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 227.3 209.5">
<path id="Spiral" d="M81.4,68.2c-0.4,8.5,1.7,16.4,6.7,23.3c4.6,6.4,10.8,11.1,18.1,14.3c4.6,2,9.4,3.7,14.5,3.9 c6.4,0.2,12.8-0.3,18.2-3.9c6.6-4.3,12.1-9.6,14.6-17.4c0.8-2.5,2.1-4.8,2.4-7.5c0.5-4.2-0.1-8.2-1.7-12.1 c-4.1-9.6-10.8-16.8-20.8-20.2c-11.6-4-22.9-3-33.1,4.5c-4.4,3.2-7.2,7.6-8.4,12.9c-0.5,2.2-1.3,4.3-1.4,6.5 c-0.2,7.4,2.5,13.6,7.8,18.7c7.3,7.1,16,9.4,25.6,6.9c9.3-2.4,13.8-9.7,13-19.3c-0.7-8.7-6.2-14.9-15.1-17.5c-2.4-0.7-4.9-1.5-7.5-1 c-3.1,0.6-5.5,2.3-6.9,5.2c-3.8,8.3,0.7,17.3,9.4,19.2c4.1,0.9,8.4-1.5,9.9-5.5c0.4-1.1,0.8-2.2,1.1-3.4c0.5-2.1-0.4-3.3-2.6-3.5 c-2-0.1-3.9,0-5.9,0.2c-1.4,0.2-2.1,1.5-1.6,2.9c0.4,1.1,1.1,1.9,1.8,2.8c0.5,0.6,0.9,1.2,0.3,1.9c-0.6,0.7-1.3,1-2.2,0.7 c-0.5-0.2-1-0.5-1.4-0.9c-1.2-1.3-2-2.8-2.4-4.5c-0.6-2.2,1.4-5,3.9-5.7c2.7-0.7,5.6-1.2,8.4-0.8c3.5,0.4,5.4,2.6,5.3,6.1 c-0.1,4.6-2.3,8.2-5.5,11c-2.8,2.5-6.5,3-10,2c-6.8-1.8-11.7-6.1-13.5-13.1c-1.5-5.8,1.2-13.9,8.1-17.2c2.6-1.2,5.2-1,7.9-0.8 c6.2,0.4,11.2,3.4,15.7,7.5c3.8,3.6,5.6,8.2,6.3,13.2c0.5,3.2,0.1,6.3-0.6,9.4c-1.2,5.7-5.1,9.4-9.8,12.3c-3.5,2.2-7.4,3-11.4,3.1 c-9,0.3-16.8-2.8-23.3-8.9c-4.5-4.2-6.7-9.6-7.9-15.4c-2.7-13,6-27.1,15.7-31.3c19.5-8.4,38.4-3.2,50.4,13c3.6,4.9,5.6,10.6,6,16.7 c0.3,4.6-0.8,9.1-2.7,13.3c-3,6.7-7.4,12.5-13.2,17c-5.7,4.5-12.3,6.2-19.6,6.5c-10.1,0.3-19-2.9-27.2-8.6c-4-2.8-7.8-5.8-10.9-9.6 c-4.7-5.7-6.9-12.4-7.8-19.7c-0.5-4-0.8-8-0.5-12.1c0.6-8.2,3.4-15.6,8.6-22c5.2-6.5,11.3-11.8,18.8-15.5c1.6-0.8,3.3-1.3,5-1.7 c0.4-0.1,0.8-0.1,0.9-0.8c0.4-4.5,4.8-8.1,10.6-7.3c3.9,0.5,5.8,2.8,5.7,6.7c0,1.1,0.4,1.5,1.3,1.8c5.9,2,11.6,4.6,16.5,8.5 c4.2,3.3,8.7,6.2,12.4,10c4.1,4.2,7.9,8.6,11.6,13.1c3.5,4.3,4.8,9.5,5.7,14.8c1.3,7.3-0.4,14.2-2.3,21.1 c-2.1,7.8-5.7,15.1-10.1,21.9c-4.1,6.2-9.9,10.6-16.7,13.7c-2.7,1.2-5.6,1.4-8.5,1.8c-5.1,0.6-10.2,0.7-15.3-0.2 c-12.6-2.2-24.7-5.8-36.2-11.7c-7.7-3.9-14.3-9-20-15.4c-3.1-3.5-5.1-7.9-7.5-11.8c-4.4-7.2-5.9-15.1-5.8-23.3 c0.1-7.2,2.4-13.8,5.6-20.2c2-3.9,4.1-7.7,6.2-11.5c1-1.8,2.4-3.3,3.8-4.7c1.4-1.4,2.8-2.7,4.2-4.1c0.5-0.4,1-0.8,1.6-1.1 c0.9-0.4,1.7-0.3,2.3,0.6c0.6,0.9,0.4,1.6-0.3,2.2c-0.7,0.6-1.5,1.2-2.2,1.9c-3.8,3.3-6.7,7.3-9,11.8c-2.9,5.7-5.9,11.2-7.5,17.5 c-2.3,8.8-1.4,17.4,2.3,25.6c2.6,5.8,6,11.2,10.1,16.1c4.4,5.2,9.7,9.1,15.8,12.1c9.4,4.6,19,8.7,29.2,11.1 c7.6,1.8,15.4,2.4,23.2,1.6c6-0.6,10.9-3.6,15.6-7.2c3-2.3,5.3-5.1,7.1-8.3c3.3-5.8,6.6-11.5,8.5-17.9c1.5-5.2,2.9-10.5,2.8-16 c-0.1-3-0.4-5.9-1-8.8c-0.8-4-2.9-7.2-5.3-10.4c-5.2-7-11.8-12.6-18.2-18.4c-5.5-4.9-12-8-18.8-10.6c-0.3-0.1-0.7-0.2-1-0.3 c-0.5-0.2-0.9-0.2-1.2,0.5c-0.7,2-2.2,3-4.3,3.3c-2.2,0.3-4.4,0.3-6.5-0.6c-1.6-0.7-2.8-1.7-3.5-3.2c-0.2-0.5-0.5-0.7-1.1-0.5 c-12.1,5-21.5,12.7-27.2,24.7c-1.4,3-1.7,6.3-2,9.6C81.6,63.9,81.5,66,81.4,68.2z M124.5,23.5c0.1-2.1-0.5-3.1-1.8-3.8 c-2.3-1.2-5.5-0.6-7.2,1.3c-1.8,2.1-2.1,6,1.8,7.4c0.9,0.3,1.8,0.5,2.8,0.7c1.4,0.2,2.3-0.3,3-1.4C124,26.3,124.4,24.6,124.5,23.5z" />
</svg>
一种简单的方法是使用描边版本遮盖您的路径，您将从中为描边-破折号偏移设置动画。
由于您的路径很脏，因此很难以编程方式进行此操作，因此我使用专用软件手动快速进行了此操作，但请随时进行改进：
polyline {
fill: none;
stroke: white;
stroke-width: 10px;
stroke-dasharray: 824px 824px;
stroke-dashoffset: 0px;
animation: stroke 5s linear forwards;
}
:checked ~ svg polyline {
animation: none;
}
:checked ~ svg polyline,
:hover polyline {
stroke: red;
opacity: 0.9;
}
@keyframes stroke {
0% {stroke-dashoffset: 0;}
100% {stroke-dashoffset: -824px}
}
<label> disable animation</label><input type="checkbox">
<br><span>hover over the frame to change stroke color</span>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 227.3 209.5">
<path id="Spiral" d="M81.4,68.2c-0.4,8.5,1.7,16.4,6.7,23.3c4.6,6.4,10.8,11.1,18.1,14.3c4.6,2,9.4,3.7,14.5,3.9 c6.4,0.2,12.8-0.3,18.2-3.9c6.6-4.3,12.1-9.6,14.6-17.4c0.8-2.5,2.1-4.8,2.4-7.5c0.5-4.2-0.1-8.2-1.7-12.1 c-4.1-9.6-10.8-16.8-20.8-20.2c-11.6-4-22.9-3-33.1,4.5c-4.4,3.2-7.2,7.6-8.4,12.9c-0.5,2.2-1.3,4.3-1.4,6.5 c-0.2,7.4,2.5,13.6,7.8,18.7c7.3,7.1,16,9.4,25.6,6.9c9.3-2.4,13.8-9.7,13-19.3c-0.7-8.7-6.2-14.9-15.1-17.5c-2.4-0.7-4.9-1.5-7.5-1 c-3.1,0.6-5.5,2.3-6.9,5.2c-3.8,8.3,0.7,17.3,9.4,19.2c4.1,0.9,8.4-1.5,9.9-5.5c0.4-1.1,0.8-2.2,1.1-3.4c0.5-2.1-0.4-3.3-2.6-3.5 c-2-0.1-3.9,0-5.9,0.2c-1.4,0.2-2.1,1.5-1.6,2.9c0.4,1.1,1.1,1.9,1.8,2.8c0.5,0.6,0.9,1.2,0.3,1.9c-0.6,0.7-1.3,1-2.2,0.7 c-0.5-0.2-1-0.5-1.4-0.9c-1.2-1.3-2-2.8-2.4-4.5c-0.6-2.2,1.4-5,3.9-5.7c2.7-0.7,5.6-1.2,8.4-0.8c3.5,0.4,5.4,2.6,5.3,6.1 c-0.1,4.6-2.3,8.2-5.5,11c-2.8,2.5-6.5,3-10,2c-6.8-1.8-11.7-6.1-13.5-13.1c-1.5-5.8,1.2-13.9,8.1-17.2c2.6-1.2,5.2-1,7.9-0.8 c6.2,0.4,11.2,3.4,15.7,7.5c3.8,3.6,5.6,8.2,6.3,13.2c0.5,3.2,0.1,6.3-0.6,9.4c-1.2,5.7-5.1,9.4-9.8,12.3c-3.5,2.2-7.4,3-11.4,3.1 c-9,0.3-16.8-2.8-23.3-8.9c-4.5-4.2-6.7-9.6-7.9-15.4c-2.7-13,6-27.1,15.7-31.3c19.5-8.4,38.4-3.2,50.4,13c3.6,4.9,5.6,10.6,6,16.7 c0.3,4.6-0.8,9.1-2.7,13.3c-3,6.7-7.4,12.5-13.2,17c-5.7,4.5-12.3,6.2-19.6,6.5c-10.1,0.3-19-2.9-27.2-8.6c-4-2.8-7.8-5.8-10.9-9.6 c-4.7-5.7-6.9-12.4-7.8-19.7c-0.5-4-0.8-8-0.5-12.1c0.6-8.2,3.4-15.6,8.6-22c5.2-6.5,11.3-11.8,18.8-15.5c1.6-0.8,3.3-1.3,5-1.7 c0.4-0.1,0.8-0.1,0.9-0.8c0.4-4.5,4.8-8.1,10.6-7.3c3.9,0.5,5.8,2.8,5.7,6.7c0,1.1,0.4,1.5,1.3,1.8c5.9,2,11.6,4.6,16.5,8.5 c4.2,3.3,8.7,6.2,12.4,10c4.1,4.2,7.9,8.6,11.6,13.1c3.5,4.3,4.8,9.5,5.7,14.8c1.3,7.3-0.4,14.2-2.3,21.1 c-2.1,7.8-5.7,15.1-10.1,21.9c-4.1,6.2-9.9,10.6-16.7,13.7c-2.7,1.2-5.6,1.4-8.5,1.8c-5.1,0.6-10.2,0.7-15.3-0.2 c-12.6-2.2-24.7-5.8-36.2-11.7c-7.7-3.9-14.3-9-20-15.4c-3.1-3.5-5.1-7.9-7.5-11.8c-4.4-7.2-5.9-15.1-5.8-23.3 c0.1-7.2,2.4-13.8,5.6-20.2c2-3.9,4.1-7.7,6.2-11.5c1-1.8,2.4-3.3,3.8-4.7c1.4-1.4,2.8-2.7,4.2-4.1c0.5-0.4,1-0.8,1.6-1.1 c0.9-0.4,1.7-0.3,2.3,0.6c0.6,0.9,0.4,1.6-0.3,2.2c-0.7,0.6-1.5,1.2-2.2,1.9c-3.8,3.3-6.7,7.3-9,11.8c-2.9,5.7-5.9,11.2-7.5,17.5 c-2.3,8.8-1.4,17.4,2.3,25.6c2.6,5.8,6,11.2,10.1,16.1c4.4,5.2,9.7,9.1,15.8,12.1c9.4,4.6,19,8.7,29.2,11.1 c7.6,1.8,15.4,2.4,23.2,1.6c6-0.6,10.9-3.6,15.6-7.2c3-2.3,5.3-5.1,7.1-8.3c3.3-5.8,6.6-11.5,8.5-17.9c1.5-5.2,2.9-10.5,2.8-16 c-0.1-3-0.4-5.9-1-8.8c-0.8-4-2.9-7.2-5.3-10.4c-5.2-7-11.8-12.6-18.2-18.4c-5.5-4.9-12-8-18.8-10.6c-0.3-0.1-0.7-0.2-1-0.3 c-0.5-0.2-0.9-0.2-1.2,0.5c-0.7,2-2.2,3-4.3,3.3c-2.2,0.3-4.4,0.3-6.5-0.6c-1.6-0.7-2.8-1.7-3.5-3.2c-0.2-0.5-0.5-0.7-1.1-0.5 c-12.1,5-21.5,12.7-27.2,24.7c-1.4,3-1.7,6.3-2,9.6C81.6,63.9,81.5,66,81.4,68.2z M124.5,23.5c0.1-2.1-0.5-3.1-1.8-3.8 c-2.3-1.2-5.5-0.6-7.2,1.3c-1.8,2.1-2.1,6,1.8,7.4c0.9,0.3,1.8,0.5,2.8,0.7c1.4,0.2,2.3-0.3,3-1.4C124,26.3,124.4,24.6,124.5,23.5z" />
<polyline id="mask" points="77.2,26.1 53.2,56.4
54.5,84.4 69.6,103.9 95.8,119.9 128.7,128.3 148.2,123.6 159.5,109.5 166.5,95.8 172.1,78.1 168,56.2 132.9,28.8 124.9,26.3
120.5,16.9 113.5,20.7 122.7,28.5 112.7,28 105.2,26.5 86.1,45.8 80.6,67.9 82.4,82.2 87.9,93.2 100.1,103.9 116.6,109.7 133.1,111
143.6,103.9 150.7,92.7 157,79.2 153.9,61.3 136,50 127.1,45.3 113.7,46.1 99.2,51.9 88.7,72.7 96.3,88.5 105.9,96.1 123.8,101
131.9,97.1 138.5,89.4 140,77.3 135.3,65.9 127.7,61.8 107.9,59.5 102.4,69.9 101.5,76.1 116.8,84.3 123.3,85.1 128.2,79.2
129.1,74 124.8,70 117.7,69.5 114.6,72.7 114.6,77.1 119.5,79.9 "/>
</svg>
如果你需要透明度而不是像我一样的白色黑客，那么你可以使用
svg {
background: lime;
}
polyline {
fill: none;
stroke: white;
stroke-width: 10px;
stroke-dasharray: 824px 824px;
stroke-dashoffset: 0px;
animation: stroke 5s linear forwards;
}
@keyframes stroke {
0% {stroke-dashoffset: 0;}
100% {stroke-dashoffset: -824px}
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 227.3 209.5">
<defs>
<mask id="mask">
<polyline points="77.2,26.1 53.2,56.4
54.5,84.4 69.6,103.9 95.8,119.9 128.7,128.3 148.2,123.6 159.5,109.5 166.5,95.8 172.1,78.1 168,56.2 132.9,28.8 124.9,26.3
120.5,16.9 113.5,20.7 122.7,28.5 112.7,28 105.2,26.5 86.1,45.8 80.6,67.9 82.4,82.2 87.9,93.2 100.1,103.9 116.6,109.7 133.1,111
143.6,103.9 150.7,92.7 157,79.2 153.9,61.3 136,50 127.1,45.3 113.7,46.1 99.2,51.9 88.7,72.7 96.3,88.5 105.9,96.1 123.8,101
131.9,97.1 138.5,89.4 140,77.3 135.3,65.9 127.7,61.8 107.9,59.5 102.4,69.9 101.5,76.1 116.8,84.3 123.3,85.1 128.2,79.2
129.1,74 124.8,70 117.7,69.5 114.6,72.7 114.6,77.1 119.5,79.9 "/>
</mask>
</defs>
<path mask="url(#mask)" id="Spiral" d="M81.4,68.2c-0.4,8.5,1.7,16.4,6.7,23.3c4.6,6.4,10.8,11.1,18.1,14.3c4.6,2,9.4,3.7,14.5,3.9 c6.4,0.2,12.8-0.3,18.2-3.9c6.6-4.3,12.1-9.6,14.6-17.4c0.8-2.5,2.1-4.8,2.4-7.5c0.5-4.2-0.1-8.2-1.7-12.1 c-4.1-9.6-10.8-16.8-20.8-20.2c-11.6-4-22.9-3-33.1,4.5c-4.4,3.2-7.2,7.6-8.4,12.9c-0.5,2.2-1.3,4.3-1.4,6.5 c-0.2,7.4,2.5,13.6,7.8,18.7c7.3,7.1,16,9.4,25.6,6.9c9.3-2.4,13.8-9.7,13-19.3c-0.7-8.7-6.2-14.9-15.1-17.5c-2.4-0.7-4.9-1.5-7.5-1 c-3.1,0.6-5.5,2.3-6.9,5.2c-3.8,8.3,0.7,17.3,9.4,19.2c4.1,0.9,8.4-1.5,9.9-5.5c0.4-1.1,0.8-2.2,1.1-3.4c0.5-2.1-0.4-3.3-2.6-3.5 c-2-0.1-3.9,0-5.9,0.2c-1.4,0.2-2.1,1.5-1.6,2.9c0.4,1.1,1.1,1.9,1.8,2.8c0.5,0.6,0.9,1.2,0.3,1.9c-0.6,0.7-1.3,1-2.2,0.7 c-0.5-0.2-1-0.5-1.4-0.9c-1.2-1.3-2-2.8-2.4-4.5c-0.6-2.2,1.4-5,3.9-5.7c2.7-0.7,5.6-1.2,8.4-0.8c3.5,0.4,5.4,2.6,5.3,6.1 c-0.1,4.6-2.3,8.2-5.5,11c-2.8,2.5-6.5,3-10,2c-6.8-1.8-11.7-6.1-13.5-13.1c-1.5-5.8,1.2-13.9,8.1-17.2c2.6-1.2,5.2-1,7.9-0.8 c6.2,0.4,11.2,3.4,15.7,7.5c3.8,3.6,5.6,8.2,6.3,13.2c0.5,3.2,0.1,6.3-0.6,9.4c-1.2,5.7-5.1,9.4-9.8,12.3c-3.5,2.2-7.4,3-11.4,3.1 c-9,0.3-16.8-2.8-23.3-8.9c-4.5-4.2-6.7-9.6-7.9-15.4c-2.7-13,6-27.1,15.7-31.3c19.5-8.4,38.4-3.2,50.4,13c3.6,4.9,5.6,10.6,6,16.7 c0.3,4.6-0.8,9.1-2.7,13.3c-3,6.7-7.4,12.5-13.2,17c-5.7,4.5-12.3,6.2-19.6,6.5c-10.1,0.3-19-2.9-27.2-8.6c-4-2.8-7.8-5.8-10.9-9.6 c-4.7-5.7-6.9-12.4-7.8-19.7c-0.5-4-0.8-8-0.5-12.1c0.6-8.2,3.4-15.6,8.6-22c5.2-6.5,11.3-11.8,18.8-15.5c1.6-0.8,3.3-1.3,5-1.7 c0.4-0.1,0.8-0.1,0.9-0.8c0.4-4.5,4.8-8.1,10.6-7.3c3.9,0.5,5.8,2.8,5.7,6.7c0,1.1,0.4,1.5,1.3,1.8c5.9,2,11.6,4.6,16.5,8.5 c4.2,3.3,8.7,6.2,12.4,10c4.1,4.2,7.9,8.6,11.6,13.1c3.5,4.3,4.8,9.5,5.7,14.8c1.3,7.3-0.4,14.2-2.3,21.1 c-2.1,7.8-5.7,15.1-10.1,21.9c-4.1,6.2-9.9,10.6-16.7,13.7c-2.7,1.2-5.6,1.4-8.5,1.8c-5.1,0.6-10.2,0.7-15.3-0.2 c-12.6-2.2-24.7-5.8-36.2-11.7c-7.7-3.9-14.3-9-20-15.4c-3.1-3.5-5.1-7.9-7.5-11.8c-4.4-7.2-5.9-15.1-5.8-23.3 c0.1-7.2,2.4-13.8,5.6-20.2c2-3.9,4.1-7.7,6.2-11.5c1-1.8,2.4-3.3,3.8-4.7c1.4-1.4,2.8-2.7,4.2-4.1c0.5-0.4,1-0.8,1.6-1.1 c0.9-0.4,1.7-0.3,2.3,0.6c0.6,0.9,0.4,1.6-0.3,2.2c-0.7,0.6-1.5,1.2-2.2,1.9c-3.8,3.3-6.7,7.3-9,11.8c-2.9,5.7-5.9,11.2-7.5,17.5 c-2.3,8.8-1.4,17.4,2.3,25.6c2.6,5.8,6,11.2,10.1,16.1c4.4,5.2,9.7,9.1,15.8,12.1c9.4,4.6,19,8.7,29.2,11.1 c7.6,1.8,15.4,2.4,23.2,1.6c6-0.6,10.9-3.6,15.6-7.2c3-2.3,5.3-5.1,7.1-8.3c3.3-5.8,6.6-11.5,8.5-17.9c1.5-5.2,2.9-10.5,2.8-16 c-0.1-3-0.4-5.9-1-8.8c-0.8-4-2.9-7.2-5.3-10.4c-5.2-7-11.8-12.6-18.2-18.4c-5.5-4.9-12-8-18.8-10.6c-0.3-0.1-0.7-0.2-1-0.3 c-0.5-0.2-0.9-0.2-1.2,0.5c-0.7,2-2.2,3-4.3,3.3c-2.2,0.3-4.4,0.3-6.5-0.6c-1.6-0.7-2.8-1.7-3.5-3.2c-0.2-0.5-0.5-0.7-1.1-0.5 c-12.1,5-21.5,12.7-27.2,24.7c-1.4,3-1.7,6.3-2,9.6C81.6,63.9,81.5,66,81.4,68.2z M124.5,23.5c0.1-2.1-0.5-3.1-1.8-3.8 c-2.3-1.2-5.5-0.6-7.2,1.3c-1.8,2.1-2.1,6,1.8,7.4c0.9,0.3,1.8,0.5,2.8,0.7c1.4,0.2,2.3-0.3,3-1.4C124,26.3,124.4,24.6,124.5,23.5z" />
</svg>