Animate SVG标志

我想在SVG中为我的标志制作动画，但是这段代码没有显示我的标志，这是什么问题，我的代码是什么？此代码不显示任何内容。如果我能够显示，如何处理我的徽标动画？Animate SVG标志

<html> 
 
<head> 
 
<style type="text/css"> 
 
\t .st0{fill:#231F20;} 
 
\t .st1{fill:#FFC510;} 
 
\t .st2{fill-rule:evenodd;clip-rule:evenodd;fill:#FFC510;} 
 
</style> 
 
</head> 
 
<body> 
 
<svg> 
 
<g> 
 
\t <g id="tomato"> 
 
\t \t <path id="1" class="st0 bracketRight" d="M50.4,248.1c3.2-0.5,5.8-0.8,7.6-0.8c2.7,0,4,0.6,4,1.7v0.1c-1.5,5.6-2.5,11.9-2.9,19 
 
\t \t \t c-1.2,15.9-1.8,24.5-1.9,25.8c-0.3,4.7-0.5,13.9-0.7,27.8c-1,20.9-1.3,31.4-1.1,31.4l-0.1,0.6c0,0.6-0.1,1.5-0.3,2.7h0.3 
 
\t \t \t c2.8-3.5,4.2-5.2,4.4-5.2v0.1c-3.1,8.8-5.2,13.1-6.4,13.1c-1.1,0-2-1.7-2.9-5.1c-0.9-3.4-1.6-7.6-2.1-12.4 
 
\t \t \t c-2.3-15.2-3.5-23.3-3.4-24.4c-0.6-5.5-1.1-14.4-1.3-26.9h-0.1l-0.4,0.5c0,0,0-0.1-0.1-0.1l0.4-4.8c0.1-8.6,0.2-13.5,0.3-15 
 
\t \t \t c0-0.6,0.1-1.3,0.2-2.1c0.1-2.8,0.3-6.5,0.5-10.9c0.3-5.2,0-7.5-1.1-7c-0.7-1.1-1.1-2.1-1.1-3C42.1,250.8,44.9,249.1,50.4,248.1z" 
 
\t \t \t /> 
 
\t \t <path id="2" class="st0 bracketRight" d="M89.2,294.5c5.9,0,11.2,1.3,16,4c2,1.1,4.8,3.6,8.5,7.5c2.6,3,4.5,6.1,5.7,9.2c0.6,1.6,0.9,2.9,0.9,3.8 
 
\t \t \t c0,4.5-1.6,7.5-4.9,8.8l-1.5,0.3c-1.1,0-2.3-0.5-3.5-1.5h-0.8c-2.1,0-8.9,0.9-20.6,2.8c-5.8,0.9-12.3,1.3-19.6,1.3 
 
\t \t \t c-0.5,2-0.8,3.5-0.8,4.6c2.8,1.6,9.5,3.3,20,5.4c1.9,0.3,3.7,0.4,5.7,0.4h3c2.9,0,5.9-0.3,9.2-0.9l0.1,0.2 
 
\t \t \t c-3.3,3.2-6.5,5.8-9.7,7.8c-5.7,3.2-10.1,5-13.1,5.2c-3.6,0.8-6.8,1.1-9.5,1.1c-7.1,0-12.4-2.4-16-7.1c-2.1-3-3.1-6.3-3.1-9.9 
 
\t \t \t c0,0-0.1-0.2-0.1-0.6c0-1,0.3-3.1,0.8-6.4h-0.1c-2.4,0-5.8-0.7-10.3-2.1c-3-1.9-4.6-4-4.6-6.3v-0.2c0-1.9,1.3-4.2,4-7.1 
 
\t \t \t c5.1-6.2,7.6-9.8,7.6-10.7c0.3-0.5,0.4-1,0.4-1.6c-0.1-0.4-0.3-0.6-0.4-0.6c-0.4,0-1.2,0.4-2.3,1.1v-0.1c1.1-1.1,1.9-1.7,2.4-1.7 
 
\t \t \t c0.7,0,1.1,0.6,1.1,1.9c0,2.2-2,6.7-6,13.6c-1.3,2.4-2,3.8-2,4.1v0.2c1.8,0.7,6,1.1,12.6,1.1c1.3-3.8,3.2-7.6,5.4-11.4 
 
\t \t \t c4.3-7,9.6-11.8,15.7-14.4C82.9,295,86,294.5,89.2,294.5z M73.1,321.9v0.2c9.6,0,19.8-1.1,30.4-3.4v-0.1c-2.7-2.9-5-4.7-7-5.4 
 
\t \t \t c-2.6-1.1-5.9-1.6-10-1.6C81.5,311.6,77,315,73.1,321.9z"/> 
 
\t \t <path id="3" class="st0 bracketRight" d="M159.9,286.2l0.1,0.1h0.1c3,0,5.6,1.5,7.8,4.6c1.2,1.8,1.8,5.7,1.8,11.6v7.8h0.1c2.1-2.7,4.1-5,5.9-7 
 
\t \t \t c4.4-4.3,8.4-6.4,11.8-6.4c2.6,0,5.1,1.1,7.5,3.4c2.9,3.1,4.4,9.2,4.4,18.4c0,6.3,1.1,25.1,3.4,56.5h-0.1 
 
\t \t \t c-0.2-0.1-1.8-3.7-4.8-10.7c-5-26-7.7-42-8-47.8c-0.3-5.8-1.1-8.2-2.4-7.1c-1.2,1.1-6.2,8.4-14.8,22c1.1,2.5,0.9,4.1-0.3,4.9 
 
\t \t \t c-1.9,1.6-4.3,2.4-7,2.4c-2.6,0-4.9-1.2-6.9-3.7c-0.6-0.6-1.1-2.7-1.5-6.3c-1.9-6.7-3.3-12.5-4-17.6H153 
 
\t \t \t c-2.9,4.3-5.9,11.5-9.1,21.4c-2.4,7.9-3.6,13-3.6,15.4c-0.3,2-0.8,3.4-1.5,4.2c-1.6,1.7-3.3,2.6-5.2,2.6h-0.4 
 
\t \t \t c-2.6,0-4.7-1.2-6.1-3.6c-0.7-1.8-1.1-3.4-1.1-4.7c0-2.9,0.5-6.4,1.4-10.4c0-8.4,0.6-18.9,1.7-31.5c-0.1,0-0.2,0-0.2-0.1 
 
\t \t \t c-6.4,1-11.1,1.5-14,1.5c-7.2-0.4-10.8-0.8-10.8-1.1c-1.9-0.8-2.8-2-2.8-3.7c0-1.5,1.2-3,3.5-4.5c1.1-0.5,4.6-1.3,10.6-2.5 
 
\t \t \t c7.8-2.1,12.9-3.7,15.4-4.9c1.1-0.8,2.6-1.3,4.7-1.3c2.6,0,4.8,1.2,6.6,3.6c1.3,2.2,1.9,4.7,1.9,7.6v1.8h0.1 
 
\t \t \t c4.4-5.4,7-8.7,7.8-9.7c0.9-1.9,2.4-3.3,4.4-4.2c1.2-0.5,2.3-0.7,3.3-0.7h0.1C159.9,286.3,159.9,286.3,159.9,286.2z M124,302.5 
 
\t \t \t v0.1c1.6,0.1,3.3,0.2,5,0.2h0.2c0.1,0,0.1-0.1,0.1-0.2v-0.6l0.1-0.9C129.3,301.2,127.5,301.6,124,302.5z"/> 
 
\t \t <path id="4" class="st1 bracketRight " d="M258.6,282.8c0.2,0,0.3,0.2,0.3,0.5c0,0.8-0.1,3.2-0.3,7.3c0.2,6.4,0.4,9.6,0.8,9.6c2.1,2.7,3.6,6,4.3,10 
 
\t \t \t c0.2,1.4,0.3,2.4,0.3,3v0.4c0,0.7-0.1,1.7-0.4,3.1c6.7,2.5,11.1,5.9,13.4,10.1c1.1,1.8,1.6,3.6,1.6,5.4c0,7.2-4.8,13.2-14.5,18 
 
\t \t \t c-6,2.8-13,4.2-20.8,4.2h-1c-18.4,0-30.1-5.9-35.1-17.6c-0.9-2.7-1.4-5.3-1.4-7.6v-0.8c0-3.8,0.8-7.8,2.3-11.9 
 
\t \t \t c4-9,11-15.6,21.2-19.9c4.9-1.9,9.4-2.9,13.5-2.9h0.6c3.6,0,7.1,0.7,10.6,2.1c0.9,0.5,1.8,1,2.7,1.7h0.1v-0.1c0-2.4,0.3-7.1,1-14 
 
\t \t \t C257.9,283.3,258.2,283.1,258.6,282.8z M226.1,328.9c0,6.3,3.5,10.8,10.6,13.5c3.3,1,7.1,1.5,11.4,1.5c6.8,0,12.1-2.2,15.8-6.6 
 
\t \t \t c1.2-1.5,1.8-3,1.8-4.5v-0.4c-0.4-1.9-2.1-4.2-5.1-7c-4.6-3.5-9.5-6.7-14.5-9.5c-4.1-2.3-6.3-3.6-6.4-3.7v-0.1 
 
\t \t \t c7.6,0.9,12.8,1.8,15.6,2.6v-0.1c-0.1-1.3-0.9-3.4-2.3-6.3c-1-1.7-3.1-2.5-6.4-2.5c-4.5,0-9.1,2.2-13.9,6.6 
 
\t \t \t c-2.4,2.8-3.7,4.8-4,5.8C226.9,321.1,226.1,324.7,226.1,328.9z"/> 
 
\t \t <path id="5" class="st1 bracketRight" d="M333.9,282.8c0.2,0,0.3,0.2,0.3,0.5c0,0.8-0.1,3.2-0.3,7.3c0.2,6.4,0.4,9.6,0.8,9.6c2.1,2.7,3.6,6,4.3,10 
 
\t \t \t c0.2,1.4,0.3,2.4,0.3,3v0.4c0,0.7-0.1,1.7-0.4,3.1c6.7,2.5,11.1,5.9,13.4,10.1c1.1,1.8,1.6,3.6,1.6,5.4c0,7.2-4.8,13.2-14.5,18 
 
\t \t \t c-6,2.8-13,4.2-20.8,4.2h-1c-18.4,0-30.1-5.9-35.1-17.6c-0.9-2.7-1.4-5.3-1.4-7.6v-0.8c0-3.8,0.8-7.8,2.3-11.9 
 
\t \t \t c4-9,11-15.6,21.2-19.9c4.9-1.9,9.4-2.9,13.5-2.9h0.6c3.6,0,7.1,0.7,10.6,2.1c0.9,0.5,1.8,1,2.7,1.7h0.1v-0.1c0-2.4,0.3-7.1,1-14 
 
\t \t \t C333.2,283.3,333.4,283.1,333.9,282.8z M301.4,328.9c0,6.3,3.5,10.8,10.6,13.5c3.3,1,7.1,1.5,11.4,1.5c6.8,0,12.1-2.2,15.8-6.6 
 
\t \t \t c1.2-1.5,1.8-3,1.8-4.5v-0.4c-0.4-1.9-2.1-4.2-5.1-7c-4.6-3.5-9.5-6.7-14.5-9.5c-4.1-2.3-6.3-3.6-6.4-3.7v-0.1 
 
\t \t \t c7.6,0.9,12.8,1.8,15.6,2.6v-0.1c-0.1-1.3-0.9-3.4-2.3-6.3c-1-1.7-3.1-2.5-6.4-2.5c-4.5,0-9.1,2.2-13.9,6.6 
 
\t \t \t c-2.4,2.8-3.7,4.8-4,5.8C302.2,321.1,301.4,324.7,301.4,328.9z"/> 
 
\t \t <path id="6" class="st0 bracketRight" d="M379.1,289.3c2.5,0,4.4,1.4,5.8,4.2c0.6,1.6,0.9,2.9,0.9,4c0,1.9-1.3,7-4,15.3c-0.1,0.3-0.2,0.7-0.2,0.9 
 
\t \t \t c0,0,1-1.1,2.8-3.2c2.9-3.1,6.6-6.8,11.2-11.1c1.9-3.1,4.3-4.6,7.1-4.6c2.2,0,4.3,1.1,6.3,3.2c1.3,1.8,2,4,2,6.6 
 
\t \t \t c-0.6,6.4-0.9,11-0.9,13.8c0,3.7,0.9,8.6,2.7,14.5c0.2,0.5,0.3,1.1,0.5,1.6h0.2c2.4-2.2,5.3-4.8,8.6-7.6h0.1c-2,8.2-3,13.2-3,14.8 
 
\t \t \t c0,0.5,0.1,1.6,0.3,3.2c0,2-1,3.7-3,5.2c-1.1,0.5-2.1,0.8-3,0.8h-0.1c-2.4,0-4.3-1.5-5.8-4.4c-5.1-6.4-8.5-11.8-10-16.2 
 
\t \t \t c-1.7-4.9-2.5-9.2-2.5-12.8H395c-3.3,3.9-6.3,8-8.9,12.4c-2.3,3.7-4.8,8.2-7.6,13.6c-1.1,2.1-2.8,4.7-5.1,7.8 
 
\t \t \t c-1.9,1.8-3.7,2.7-5.6,2.7c-0.2,0-0.3,0-0.3,0.1c-1.9,0-3.7-0.9-5.3-2.8c-0.9-1.4-1.3-2.7-1.3-3.9c0-1.5,0.8-3.6,2.3-6.3 
 
\t \t \t c1-3.9,2.4-10.8,4.4-20.7c1-5,2.9-11.8,5.8-20.5c-2.9,0.5-7.4,1.7-13.6,3.5v0.3c0.1,0,0.1,0,0.2,0.1c-0.3,0.5-0.8,0.8-1.3,0.8 
 
\t \t \t c0-0.1,0.1-0.2,0.4-0.3v-0.2H359c-0.3,0-1.2,0.2-2.7,0.6c-0.9-0.2-1.3-0.6-1.3-1.2c0-0.5,0.6-1.2,1.7-2c1.4-1.4,3.4-2.9,6-4.7 
 
\t \t \t c3.6-2.6,7.7-4.8,12.1-6.6C376.7,289.6,378.1,289.3,379.1,289.3z"/> 
 
\t \t <path id="7" class="st0 bracketRight" d="M566.8,282.4c0.1,0,0.2,0.1,0.3,0.1c8.6-0.5,15.7-0.8,21.1-0.8c5.9,0,9.9,0.3,12.1,0.9 
 
\t \t \t c6.9,1.2,14,4.4,21.4,9.7c6.5,5.1,9.8,10.5,9.8,16.4c0,6.2-4.7,15.8-14,28.9c-4,4.8-7,8.1-9,9.7c-6.4,5.5-12.1,8.5-16.9,9.1 
 
\t \t \t c-0.5,0.1-1.1,0.1-1.6,0.1c-3.6,0-6.1-1.7-7.6-5c-0.3-2.1-1.3-4.8-3-8.2c-1.7-3.4-3.5-9.1-5.6-17.3c-2-8.1-3.4-13.2-3.9-15.3h-0.1 
 
\t \t \t c-0.2,0.2-3.5,5.9-10,17.2c-6.5,11.2-10.3,17.6-11.2,19.1c-1.6,2-3.4,3.2-5.3,3.4c-2.7,0.3-4.7-0.8-6.2-3.5 
 
\t \t \t c-0.2-0.8-0.3-1.5-0.3-2v-0.5c0.5-2.8,1.1-5.4,1.9-7.8c1-13,1.9-21.6,2.5-25.8c0-1.8,1.3-6.8,4-15v-0.1c-3.9,1.7-6.5,2.8-7.8,3.3 
 
\t \t \t l-1.1,0.3c-0.8,0-1.2-0.3-1.2-0.8v-0.3c0-0.3,1.1-0.7,3.2-1.3c1.9-1.3,4.5-3.2,7.7-5.7c0.2-0.2,0.8-0.4,1.7-0.7 
 
\t \t \t c1.6-0.2,2.8,0.7,3.5,2.8c0.2,0.6,0.3,1.4,0.3,2.3l-3.7,29.9l0.1-0.1c0.3-0.3,6.8-8.7,19.6-25.2c0-1.1,1-2.7,3-5.1 
 
\t \t \t c1.9-1.5,3.7-2.3,5.5-2.6c2.7-0.3,5.1,0.7,7.1,3.2c1.5,1.6,2.2,5.8,2.2,12.6c0,2.3,0.4,6,1.3,11.2c1.1,5.1,2.5,10.2,4.4,15.3 
 
\t \t \t c1,2.3,1.8,3.8,2.3,4.5h0.1c3.3-1.4,6.9-4,10.9-7.8c4.3-4.6,6.4-7,6.4-7.5c4.6-6.1,7-10.6,7-13.5v-0.1c0-2.7-3.5-6.4-10.6-11.1 
 
\t \t \t c-5.9-3.4-10.8-5.9-14.8-7.5C587.5,290.2,579.1,287,566.8,282.4L566.8,282.4z"/> 
 
\t \t <path id="8" class="st0 bracketRight" d="M666.3,292.1c5.9,0,11.2,1.3,16,4c2,1.1,4.8,3.6,8.5,7.5c2.6,3,4.5,6.1,5.7,9.2c0.6,1.6,0.9,2.9,0.9,3.8 
 
\t \t \t c0,4.5-1.6,7.5-4.9,8.8l-1.5,0.3c-1.1,0-2.3-0.5-3.5-1.5h-0.8c-2.1,0-8.9,0.9-20.6,2.8c-5.8,0.9-12.3,1.3-19.6,1.3 
 
\t \t \t c-0.5,2-0.8,3.5-0.8,4.6c2.8,1.6,9.5,3.3,20,5.4c1.9,0.3,3.7,0.4,5.7,0.4h3c2.9,0,5.9-0.3,9.2-0.9l0.1,0.2 
 
\t \t \t c-3.3,3.2-6.5,5.8-9.7,7.8c-5.7,3.2-10.1,5-13.1,5.2c-3.6,0.8-6.8,1.1-9.5,1.1c-7.1,0-12.4-2.4-16-7.1c-2.1-3-3.1-6.3-3.1-9.9 
 
\t \t \t c0,0-0.1-0.2-0.1-0.6c0-1,0.3-3.1,0.8-6.4h-0.1c-2.4,0-5.8-0.7-10.3-2.1c-3-1.9-4.6-4-4.6-6.3v-0.2c0-1.9,1.3-4.2,4-7.1 
 
\t \t \t c5.1-6.2,7.6-9.8,7.6-10.7c0.3-0.5,0.4-1,0.4-1.6c-0.1-0.4-0.3-0.6-0.4-0.6c-0.4,0-1.2,0.4-2.3,1.1v-0.1c1.1-1.1,1.9-1.7,2.4-1.7 
 
\t \t \t c0.7,0,1.1,0.6,1.1,1.9c0,2.2-2,6.7-6,13.6c-1.3,2.4-2,3.8-2,4.1v0.2c1.8,0.7,6,1.1,12.6,1.1c1.3-3.8,3.2-7.6,5.4-11.4 
 
\t \t \t c4.3-7,9.6-11.8,15.7-14.4C660.1,292.6,663.2,292.1,666.3,292.1z M650.3,319.5v0.2c9.6,0,19.8-1.1,30.4-3.4v-0.1 
 
\t \t \t c-2.7-2.9-5-4.7-7-5.4c-2.6-1.1-5.9-1.6-10-1.6C658.7,309.2,654.2,312.6,650.3,319.5z"/> 
 
\t \t <path id="9" class="st0 bracketLeft" d="M707.2,264.4c1.3,0,2.8,0.8,4.2,2.5c1,1.5,1.5,3.2,1.5,5.1c0,2.5-0.4,6.6-1.3,12.2c-0.7,2.9-1.5,5.5-2.5,7.9 
 
\t \t \t c-0.6,1.8-2.1,4.5-4.5,8.2c-0.1,1.6,1.2,9.3,4.1,23h0.1c20.2-17,32.3-18.7,36.5-5.1c1.4,4.6,2.1,8.7,2.1,12.3 
 
\t \t \t c0,7.2-2.7,12.5-8.2,15.9c-7.3,4.7-15.9,7-25.8,7c-1.3,0-2.6,0-3.9-0.1h-0.2c-0.3,0-0.7,0-1.1-0.1c-0.4,0.1-0.7,0.1-0.9,0.1 
 
\t \t \t c-4.3-0.8-8.1-1.5-11.6-2.3c-2.3-0.6-3.5-0.9-3.6-1.1c0.8-0.2,4.2-1.1,10-2.7c0-0.6-0.1-2.4-0.4-5.3c-0.3-2.9-1.4-10.1-3.5-21.4 
 
\t \t \t c-2-11.3-3.1-16.9-3.2-16.9c-1.5,0.7-2.9,1.1-4.2,1.1c2.1-2.2,3.3-3.9,3.7-5.1c0.1,0,0.1-0.1,0.2-0.3c-0.1-1.8-0.1-3.3-0.1-4.7 
 
\t \t \t c0-8.8,1.9-17.2,5.7-25.1C702.4,266.1,704.6,264.4,707.2,264.4z M711.7,346.5c15.4-1,22.8-7.7,22.2-20.1 
 
\t \t \t c-0.6-12.4-8.3-11.2-23.1,3.5C710.9,333.3,711.2,338.9,711.7,346.5z"/> 
 
\t </g> 
 
\t <path class="st2" d="M486.6,213.5c-48,19.8-70.8,74.7-51,122.6c15.2,37,51.3,59,89.1,58.1l0-5.1l0,0c-35.7,0.9-69.9-20-84.3-54.9 
 
\t \t c-18.7-45.3,2.9-97.3,48.3-116c34.7-14.3,73.3-5,97.9,20.6c1.6-0.8,3.1-1.7,4.7-2.4C565.3,208.5,523.8,198.2,486.6,213.5 
 
\t \t L486.6,213.5z M542.5,224.4c6.8,1.8,13.4,4.6,19.6,8.1c8.7,5.1,11.3,11.8,4.8,19.3l-41.6,41.6l0.1-56.8 
 
\t \t C525.4,225.1,532.1,221.7,542.5,224.4L542.5,224.4z M502.2,376.3c-6.8-1.8-13.4-4.6-19.6-8.1c-9.3-5.4-11.6-12.7-3.4-20.8 
 
\t \t l40.3-40.1l-0.3,60.4C517.9,376.3,511.5,378.8,502.2,376.3L502.2,376.3z M454.4,339.8c-3.6-6.1-6.3-12.7-8.1-19.6 
 
\t \t c-2.7-10.4,0.8-17.2,12.3-17.1l56.8,0.1l-40.3,40.1C467.1,351.5,459.8,349.1,454.4,339.8L454.4,339.8z M446.4,280.2 
 
\t \t c1.8-6.8,4.6-13.4,8.1-19.6c5.4-9.3,12.7-11.6,20.8-3.4l40.1,40.3l-56.8-0.1C447.1,297.4,443.7,290.6,446.4,280.2L446.4,280.2z 
 
\t \t M482.9,232.4c6.1-3.6,12.7-6.3,19.6-8.1c10.4-2.7,17.2,0.8,17.1,12.3l-0.1,56.8l-40.1-40.3C471.3,245,473.6,237.8,482.9,232.4 
 
\t \t L482.9,232.4z"/> 
 
\t <g> 
 
\t \t <path class="st0" d="M227.7,374.2h-1.6l-3.1-5.8l-3,5.8h-1.6l-6.8-12.8h2.2l5.3,10.1l2.7-5.2l-2.5-4.9h2.2l5.3,10.1l5.2-10.1h2.2 
 
\t \t \t L227.7,374.2z"/> 
 
\t \t <path class="st0" d="M234.7,374.2v-12.8h12.1v1.6h-10v3.7h8.9v1.6h-8.9v4.2h10.1v1.6H234.7z"/> 
 
\t \t <path class="st0" d="M259,373.4c-1.1,0.5-2.4,0.8-4,0.8h-7.5v-12.8h7.7c1.4,0,2.7,0.3,3.6,0.8c1.2,0.6,1.7,1.5,1.7,2.8 
 
\t \t \t c0,1-0.6,1.8-1.7,2.5c1.4,0.6,2.2,1.6,2.2,3C261.1,371.8,260.4,372.8,259,373.4z M257.6,363.5c-0.6-0.3-1.4-0.5-2.4-0.5h-5.6v3.7 
 
\t \t \t h5.6c1,0,1.8-0.2,2.4-0.5c0.6-0.3,0.9-0.8,0.9-1.4C258.5,364.3,258.2,363.8,257.6,363.5z M258,368.9c-0.7-0.3-1.7-0.5-2.8-0.5 
 
\t \t \t h-5.6v4.2h5.7c1.1,0,2-0.2,2.7-0.5c0.8-0.4,1.1-0.9,1.1-1.6C259,369.8,258.7,369.2,258,368.9z"/> 
 
\t \t <path class="st0" d="M282.9,372.6c-1.5,1.1-3.6,1.6-6.1,1.6h-5.5v-12.8h6.3c2.5,0,4.5,0.6,5.8,1.7c1.3,1.1,1.9,2.7,1.9,4.7 
 
\t \t \t C285.3,369.9,284.5,371.5,282.9,372.6z M281.9,364.3c-0.9-0.8-2.4-1.2-4.3-1.2h-4.3v9.5h3.5c2.1,0,3.7-0.4,4.8-1.2 
 
\t \t \t c1.1-0.8,1.7-2,1.7-3.5S282.8,365.1,281.9,364.3z"/> 
 
\t \t <path class="st0" d="M286.7,374.2v-12.8h12.1v1.6h-10v3.7h8.9v1.6h-8.9v4.2h10.1v1.6H286.7z"/> 
 
\t \t <path class="st0" d="M307.8,374.2h-1.5l-7.1-12.8h2.2l5.6,10.1l5.4-10.1h2.2L307.8,374.2z"/> 
 
\t \t <path class="st0" d="M315.8,374.2v-12.8h12.1v1.6h-10v3.7h8.9v1.6h-8.9v4.2H328v1.6H315.8z"/> 
 
\t \t <path class="st0" d="M329.3,374.2v-12.8h2.1v11.2h9.2v1.6H329.3z"/> 
 
\t \t <path class="st0" d="M354.7,372.6c-1.5,1.2-3.5,1.8-6,1.8c-2.5,0-4.5-0.6-6-1.7c-1.5-1.2-2.2-2.8-2.2-4.8c0-2,0.8-3.6,2.3-4.7 
 
\t \t \t c1.4-1.1,3.4-1.6,6-1.6c2.5,0,4.5,0.5,6,1.6c1.5,1.1,2.3,2.7,2.3,4.7C357,369.8,356.2,371.4,354.7,372.6z M353.3,364.3 
 
\t \t \t c-1.1-0.8-2.6-1.2-4.6-1.2c-2,0-3.5,0.4-4.5,1.2c-1.1,0.8-1.6,2-1.6,3.5c0,1.5,0.5,2.7,1.6,3.6c1.1,0.9,2.6,1.3,4.5,1.3 
 
\t \t \t c2,0,3.5-0.4,4.6-1.3c1.1-0.9,1.6-2.1,1.6-3.6C354.9,366.3,354.4,365.1,353.3,364.3z"/> 
 
\t \t <path class="st0" d="M369.6,368.2c-1.1,0.5-2.4,0.8-4,0.8h-4.9v5.2h-2.1v-12.8h7.3c3.9,0,5.8,1.3,5.8,3.8 
 
\t \t \t C371.6,366.5,371,367.5,369.6,368.2z M366,363h-5.3v4.3h5.3c1,0,1.9-0.2,2.5-0.5c0.7-0.4,1.1-0.9,1.1-1.5 
 
\t \t \t C369.6,363.8,368.4,363,366,363z"/> 
 
\t \t <path class="st0" d="M388.4,374.2v-9l-5.6,9h-1.5l-5.6-9v9h-2.1v-12.8h2l6.3,10.3l6.4-10.3h2v12.8H388.4z"/> 
 
\t \t <path class="st0" d="M392.6,374.2v-12.8h12.1v1.6h-10v3.7h8.9v1.6h-8.9v4.2h10.1v1.6H392.6z"/> 
 
\t \t <path class="st0" d="M418.8,374.2l-9.9-9.9v9.9h-2.1v-12.8h1.9c1.2,1.3,2.9,3,5,5c2.5,2.5,4.1,4.1,4.9,4.9v-9.9h2.1v12.8H418.8z" 
 
\t \t \t /> 
 
\t \t <path class="st0" d="M430.1,363v11.2h-2.1V363h-5.6v-1.6h13.2v1.6H430.1z"/> 
 
\t \t <path class="st1" d="M552.7,374.2v-9l-5.6,9h-1.5l-5.6-9v9H538v-12.8h2l6.3,10.3l6.4-10.3h2v12.8H552.7z"/> 
 
\t \t <path class="st1" d="M568.6,374.2l-2.1-3.8h-7.2l-2.1,3.8h-2.3l7.3-12.8h1.6l7.1,12.8H568.6z M563,364.1l-2.7,4.7h5.3L563,364.1z" 
 
\t \t \t /> 
 
\t \t <path class="st1" d="M582.7,368c1.1,0.6,1.7,1.5,1.7,2.8v3.5h-2.1v-3.4c0-1.3-1.2-2-3.5-2h-5.3v5.4h-2.1v-12.8h7.5 
 
\t \t \t c3.7,0,5.6,1.2,5.6,3.5C584.6,366.3,584,367.3,582.7,368z M579,363h-5.5v4.1h5.1c1.1,0,2.1-0.2,2.7-0.5c0.7-0.4,1.1-0.9,1.1-1.7 
 
\t \t \t C582.5,363.7,581.3,363,579,363z"/> 
 
\t \t <path class="st1" d="M598.8,374.2l-8-6.2l-2.6,1.6v4.6h-2.1v-12.8h2.1v6.2l10.1-6.2h3.4l-9.2,5.6l9.3,7.2H598.8z"/> 
 
\t \t <path class="st1" d="M603.1,374.2v-12.8h12.1v1.6h-10v3.7h8.9v1.6h-8.9v4.2h10.1v1.6H603.1z"/> 
 
\t \t <path class="st1" d="M623.5,363v11.2h-2.1V363h-5.6v-1.6H629v1.6H623.5z"/> 
 
\t \t <path class="st1" d="M630,374.2v-12.8h2.1v12.8H630z"/> 
 
\t \t <path class="st1" d="M645.7,374.2l-9.9-9.9v9.9h-2.1v-12.8h1.9c1.2,1.3,2.9,3,5,5c2.5,2.5,4.1,4.1,4.9,4.9v-9.9h2.1v12.8H645.7z" 
 
\t \t \t /> 
 
\t \t <path class="st1" d="M662.8,369.2h-6.2v-1.7h8.2c0.1,0.7,0.1,1.1,0.1,1.4c0,1.8-0.8,3.1-2.4,4.1c-1.4,0.9-3.2,1.3-5.3,1.3 
 
\t \t \t c-2.6,0-4.6-0.6-6.1-1.7c-1.6-1.1-2.4-2.8-2.4-4.8c0-2,0.8-3.6,2.3-4.8c1.5-1.2,3.5-1.8,6.1-1.8c1.9,0,3.5,0.3,4.7,0.9 
 
\t \t \t c1.5,0.7,2.5,2.1,3,4.1h-2.1c-0.3-1.2-0.9-2.1-1.8-2.6c-0.9-0.5-2.1-0.8-3.8-0.8c-2,0-3.5,0.4-4.6,1.3c-1.1,0.9-1.7,2.1-1.7,3.6 
 
\t \t \t c0,1.6,0.6,2.8,1.7,3.6c1.1,0.8,2.7,1.3,4.7,1.3c1.5,0,2.9-0.3,3.9-1C662.2,371.1,662.8,370.2,662.8,369.2z"/> 
 
\t </g> 
 
</g> 
 
</svg> 
 
</body> 
 
</html>

来源

2017-06-01 Jakub Jóźwiak

加上'视框=“0 0 1000 1000”'svg标签。 –

谢谢！现在我可以如何绘制效果？ –

我觉得你漂亮的标志是不是真的适合的绘图动画。

一种方式是借鉴你的路径的轮廓，并在回调函数往里面...

下面的示例给你一个小的方向

<!DOCTYPE html> 
 
    <html lang="en"> 
 
    <head> 
 
    <meta charset="UTF-8"> 
 
    <title>SVG 001</title> 
 
    <style> 
 
     body{font-family:"Calibri", sans-serif;} 
 
     svg{border:1px solid #eee;width:100px;height:100px;} 
 
    </style> 
 
    </head> 
 
    <body> 
 
     <p>Offset Dasharray</p> 
 
    <svg width="200" height="200" viewBox="0 0 500 500"> 
 
    <path id="myPath" d="M 50 50 q 200 800 400 0" stroke="none" 
 
     stroke-width="5" fill="none" /> 
 
    </svg> 
 
    <script> 
 
     var paintPathAni=function(path, duration, color, callback){ 
 
      easeInOutQuad= function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t } 
 
      easeInQuad= function (t) { return t*t} 
 
      easeOutQuad= function (t) { return t*(2-t) } 
 
      /* 
 
      for (var i=0; i<=1; i+=0.1) 
 
      { 
 
      console.log(easeInOutQuad(i)); 
 
      } 
 
      */ 
 
      var len=path.getTotalLength(); 
 
      var aktLen; 
 
      var sumSteps = duration/(1000/60) // 60 pics per second 
 
      var step=1; 
 
      var pathAnim; 
 
      var anim=function(){ 
 
      //aktLen = len/sumSteps*step; 
 
      aktLen = easeInOutQuad(step/sumSteps)*len; 
 
      //aktLen = easeInQuad(step/sumSteps)*len; 
 
      //aktLen = easeOutQuad(step/sumSteps)*len; 
 
      
 
      path.setAttribute('stroke-dasharray', aktLen + ' ' + (len - aktLen)); 
 
      path.setAttribute('stroke',color); 
 
      if (step < sumSteps){ 
 
       step++; 
 
       pathAnim = setTimeout(anim, 1000/60) //1000/60 pics/second 
 
       } else { 
 
       clearTimeout(pathAnim); 
 
       path.setAttribute('stroke',"red"); 
 
       path.setAttribute('stroke-dasharray','none'); 
 
       if (callback) return callback(); 
 
       } 
 
      } 
 
      anim(); 
 
     } 
 
     paintPathAni(myPath, 3500,'red',function(){console.log('Animation End')}); 
 
    </script> 
 
    </body> 
 
    </html>

来源

2017-06-01 13:55:40

Animate SVG标志

回答

相关问题