复杂填充的 SVG 动画

Question

我需要像这样为徽标制作动画：

这是它的 SVG 代码：

<?xml version="1.0" encoding="utf-8"?>
		<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
		<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
			 viewBox="0 0 800 800" style="enable-background:new 0 0 800 800;" xml:space="preserve" id="mylogo">
		<style type="text/css">
			.st0{fill:#231F20;}
		</style>
		<g id="cap_arch_connector_vert">
			<path class="st0" d="M333.7,195.4c-5.4,0-10.7,0.4-16,1v39.3c5.2-0.8,10.6-1.2,16-1.2h16v-39.1H333.7z"/>
		</g>
		<g id="cap_bottom_arch">
			<path class="st0" d="M333.7,231c-56.4,0-103.2,41.8-111,96.1v0h32.5c7.4-36.5,39.8-64.1,78.5-64.1h65.2l10.4-32H333.7z"/>
		</g>
		<g id="arched_line_right">
			<path class="st0" d="M641.9,570l-23,23c18.7,14,42,22.3,67.1,22.3c5.4,0,10.8-0.4,16-1.1v-32.5c-5.2,1.1-10.5,1.6-16,1.6
				C669.7,583.3,654.5,578.4,641.9,570z"/>
		</g>
		<g id="right_leg_line_1">
			<path class="st0" d="M702,646.4c-5.3,0.6-10.6,0.9-16,0.9c-79.5,0-144.1-64.7-144.1-144.1l0.3-272.2h-32l-0.3,272.2
				c0,97.1,79,176.1,176.1,176.1c5.4,0,10.7-0.3,16-0.8V646.4z"/>
		</g>
		<g id="arch_under_circle">
			<path class="st0" d="M203.3,615.3c24.8,0,48.2-8.2,67.1-22.3l-23-23c-12.8,8.4-28,13.3-44.1,13.3c-26.1,0-49.4-12.6-64-32H102
				C120,589.1,158.7,615.3,203.3,615.3z"/>
		</g>
		<g id="circle">
			<path class="st0" d="M203.3,551.3c-26.5,0-48-21.6-48-48s21.5-48,48-48s48,21.6,48,48S229.8,551.3,203.3,551.3z M203.3,487.2
				c-8.8,0-16,7.2-16,16c0,8.8,7.2,16,16,16s16-7.2,16-16C219.3,494.4,212.1,487.2,203.3,487.2z"/>
		</g>
		<g id="line_to_circle">
			<path class="st0" d="M27.9,487.2c-0.5,5.3-0.7,10.6-0.7,16c0,5.4,0.3,10.7,0.8,16h145.7v-32H27.9z"/>
		</g>
		<g id="leg_connector">
			<path class="st0" d="M297,529l-13.5-13.5l-4.3,13.2c-2.3,6.7-5.4,12.9-9.1,18.6l12.4,12.4v0l34,34l0,0l7.6,7.6l22.4-22.9L297,529z"
				/>
		</g>
		<g id="arch_connector">
			<path class="st0" d="M277.8,600.3l-7.4-7.4l0,0l-6-6l-3.8-3.8l0,0L247.4,570c-9.8,6.4-20.9,10.8-32.8,12.5l26.3,26.3l38.4,38.4
				l22.4-22.9L277.8,600.3z"/>
		</g>
		<g id="cap_mid-bottom_parallel_line">
			<polygon class="st0" points="542.2,231 443,231 432.6,263 542.1,263 	"/>
		</g>
		<g id="arch_connector_very_right">
			<path class="st0" d="M686,583.3c-5.5,0-10.8-0.6-16-1.6v19.4v13.1v32.3v18.7v13.5c5.3,0.5,10.6,0.8,16,0.8s10.7-0.3,16-0.8v-13.5
				v-18.7v-32.3v-13.1v-19.4C696.8,582.7,691.5,583.3,686,583.3z"/>
		</g>
		<g id="arch_connector_right">
			<path class="st0" d="M674.7,582.5c-12-1.7-23.1-6.1-32.8-12.5l-13.1,13.1l-9,9l-24.4,24.4L584,626.6l25.9,20.7l49.4-49.4
				L674.7,582.5z"/>
		</g>
		<g id="right_leg_connector">
			<path class="st0" d="M619.2,547.3c-6.4-9.7-10.8-20.8-12.5-32.8l-26.3,26.3v0l-30.7,30.7l20.9,24.1l2.2-1.8l27.8-27.8L619.2,547.3z
				"/>
		</g>
		<g id="cap_arch_connector_hor">
			<path class="st0" d="M246.2,295.1h-48.4h-30.1h-3.5c-2.9,10.3-5,21-5.9,32h0.3l9.2,0v0h55h32.5c2.4-11.8,7.5-22.7,14.5-32H246.2z"
				/>
		</g>
		<g id="cap_top_arch">
			<path class="st0" d="M333.7,166.9c-91.7,0-167.3,70.5-175.4,160.2l32.2,0c7.4-66.7,60.5-119.8,127.2-127.2v0.1c5.3-0.6,10.6-1,16-1
				h16v-25.2v-6.8H333.7z"/>
		</g>
		<g id="left_leg_line_1">
			<path class="st0" d="M309.6,538.8L409.3,231h-33.7l-96.4,297.7c-2.3,6.7-5.4,12.9-9.1,18.6l23,23
				C300.1,561,305.7,550.3,309.6,538.8z"/>
		</g>
		<g id="left_leg_line_2">
			<path class="st0" d="M443,231L340,548.8c-19.8,58.9-74.7,98.5-136.8,98.5c-79.5,0-144.1-64.7-144.1-144.1c0-5.4,0.3-10.7,0.9-16
				H27.9c-0.5,5.3-0.7,10.6-0.7,16c0,97.1,79,176.1,176.1,176.1c75.8,0,142.9-48.4,167.2-120.5L476.6,231H443z"/>
		</g>
		<g id="right_leg_line_2">
			<path class="st0" d="M619.2,547.3c-8.4-12.6-13.3-27.8-13.3-44.1l0.3-272.3h-32l-0.3,272.3c0,25.1,8.3,48.4,22.3,67.1L619.2,547.3z
				"/>
		</g>
		<g id="cap_top_parallel_line">
			<polygon class="st0" points="728.8,199 718.4,166.9 684.8,166.9 381.7,166.9 381.7,199 695.2,199 	"/>
		</g>
		<g id="cap_bottom_parallel_line">
			<polygon class="st0" points="739.2,231 732.3,231 705.5,231 574.2,231 574.2,263 715.9,263 749.6,263 	"/>
		</g>
		<g id="right_cap_corner">
			<polygon class="st0" points="749.6,263 739.2,231 739.2,231 728.8,199 728.8,199 718.4,166.9 684.8,166.9 714.2,257.7 714.2,257.7 
				715.9,263 	"/>
		</g>
		</svg>

我花了很多时间寻找解决方案，但大多数时候我偶然发现了描边 SVG 动画。 Vivus.js 看起来是一个很好的解决方案，但它不会为填充路径设置动画，它仅适用于笔划。我发现的几乎所有示例也是如此，例如 DrawSVG 等。 我将我的 SVG 分解为简单的元素，以便为它们制作动画。我想我必须使用一些 SVG 蒙版，因为我无法通过应用笔画等来更改徽标的现有形状。唯一与我相似的动画是 on Codepen。那里的 SVG 代码非常复杂，我不确定那里的动画方式是否能解决我的问题。

如何为徽标制作动画？

Answer 1

正如 cmets 所建议的，最好将图形从形状转换为笔触，然后使用动画库（例如 Anime JS 或 Greensock）来执行动画。

转换为笔画

我使用 Illustrator 转换为笔画，然后导出为 SVG，然后使用 Jake Archibald 的 SVGOMG 优化图形。

动画示例

我为动画选择了 Anime JS 库 - 请参阅下面的 sn-p。

anime({
  targets: 'path',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: [0.550, 0.055, 0.100, 1.000],
  duration: 1500,
  delay: 1200,
  direction:'forwards'
});

svg {
  display: block;
  width: 300px;
  height: 300px;
  margin: 0 auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.0/anime.min.js"></script>
<svg id="mylogo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800"><style>.st0{fill:none;stroke:#231f20;stroke-width:34;stroke-miterlimit:10}</style><path class="st0" d="M382 183.1h324l21 64H589.5v245.5s-2.5 22.5 10 48l-47 51.5s33 62.5 132 73v-61.5l-21.6-2.5-19.4-6.5-43.8 41.3"/><path class="st0" d="M552.5 592.1s-25.5-36-25.5-106v-237h-71.5l-105 315s-10.6 49-74.2 81.8C184 693.6 88 634.6 67.7 592.6c-23.3-32-26.7-88-26.7-88h130.3c-.2-7.4 2.1-14.9 7.1-21.2 11.1-13.7 31.3-15.9 45-4.8s15.9 31.3 4.8 45c-11.1 13.7-31.3 15.9-45 4.8-7.5-6.1-11.5-14.8-11.9-23.7"/><path d="M125.7 561.9s42.7 58.3 117.7 29l44.7 43" fill="none" stroke="#231f20" stroke-width="34" stroke-linecap="square" stroke-miterlimit="10"/><path class="st0" d="M335.7 589.2l-47.3-46 5.3-9.3L386 248.6l-50.5-1.3-3.2-.1c-62-2-90 64.7-90 64.7h-68c42-134 157.3-128 157.3-128l.7 61.9"/><path fill="#fff" d="M92.7 536.2h54v22.7h-54z"/></svg>

关于图形本身的任何其他问题都可以在graphic design StackExchange. 上更好