Анимация контуров фигур svg

299
27 сентября 2017, 12:33

Добрый день, я делаю анимацию контуров, но есть один элемент который я не могу анимировать по контурам (странная кривая, смотрите ниже), поэтому думаю хотел бы спросить ваше мнение, как это можно сделать иначе кроме как попробовать делать анимацию заливки?

<svg width="90" height="129" viewBox="0 0 90 129" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
<title>Group</title> 
<desc>Created using Figma</desc> 
<g id="Canvas" transform="translate(-2658 -9375)"> 
<g id="Group"> 
<g id="Vector 7"> 
<use xlink:href="#path0_stroke" transform="translate(2675 9376)" fill="#EB5757"/> 
</g> 
<g id="Vector 7"> 
<use xlink:href="#path1_stroke" transform="translate(2675 9424)" fill="#EB5757"/> 
</g> 
<g id="Group"> 
<g id="Rectangle 18"> 
<use xlink:href="#path2_stroke" transform="translate(2665 9449)" fill="#EB5757"/> 
</g> 
<g id="Ellipse 4"> 
<use xlink:href="#path3_stroke" transform="translate(2659 9440)" fill="#EB5757"/> 
</g> 
</g> 
<g id="Group"> 
<g id="Ellipse 4"> 
<use xlink:href="#path3_stroke" transform="translate(2659 9392)" fill="#EB5757"/> 
</g> 
<g id="telephone"> 
<g id="Vector"> 
<use xlink:href="#path4_fill" transform="translate(2665.67 9398.67)" fill="#EB5757"/> 
<use xlink:href="#path5_fill" transform="translate(2665.67 9398.67)" fill="#EB5757"/> 
<use xlink:href="#path6_fill" transform="translate(2665.67 9398.67)" fill="#EB5757"/> 
<mask id="mask0_outline_ins"> 
<use xlink:href="#path4_fill" fill="white" transform="translate(2665.67 9398.67)"/> 
<use xlink:href="#path5_fill" fill="white" transform="translate(2665.67 9398.67)"/> 
<use xlink:href="#path6_fill" fill="white" transform="translate(2665.67 9398.67)"/> 
</mask> 
<g mask="url(#mask0_outline_ins)"> 
<use xlink:href="#path7_stroke_2x" transform="translate(2665.67 9398.67)" fill="#EB5757"/> 
</g> 
</g> 
</g> 
</g> 
</g> 
</g> 
<defs> 
<path id="path0_stroke" d="M 0.707107 -0.707107C 0.316583 -1.09763 -0.316583 -1.09763 -0.707107 -0.707107L -7.07107 5.65685C -7.46159 6.04738 -7.46159 6.68054 -7.07107 7.07107C -6.68054 7.46159 -6.04738 7.46159 -5.65685 7.07107L 0 1.41421L 5.65685 7.07107C 6.04738 7.46159 6.68054 7.46159 7.07107 7.07107C 7.46159 6.68054 7.46159 6.04738 7.07107 5.65685L 0.707107 -0.707107ZM 72.7071 120.707C 73.0976 120.317 73.0976 119.683 72.7071 119.293L 66.3431 112.929C 65.9526 112.538 65.3195 112.538 64.9289 112.929C 64.5384 113.319 64.5384 113.953 64.9289 114.343L 70.5858 120L 64.9289 125.657C 64.5384 126.047 64.5384 126.681 64.9289 127.071C 65.3195 127.462 65.9526 127.462 66.3431 127.071L 72.7071 120.707ZM -1 0L -1 15.5L 1 15.5L 1 0L -1 0ZM -1 96.5L -1 104L 1 104L 1 96.5L -1 96.5ZM 16 121L 72 121L 72 119L 16 119L 16 121ZM -1 104C -1 113.389 6.61116 121 16 121L 16 119C 7.71573 119 1 112.284 1 104L -1 104Z"/> 
<path id="path1_stroke" d="M -1 0L -1 15L 1 15L 1 0L -1 0Z"/> 
<path id="path2_stroke" d="M 0 0L 0 -1C -0.552285 -1 -1 -0.552285 -1 2.22045e-16L 0 0ZM 20 0L 21 0C 21 -0.552285 20.5523 -1 20 -1L 20 0ZM 20 14L 20 15C 20.5523 15 21 14.5523 21 14L 20 14ZM 0 14L -1 14C -1 14.5523 -0.552285 15 2.22045e-16 15L 0 14ZM 10 9.1L 9.32696 9.83961C 9.70849 10.1868 10.2915 10.1868 10.673 9.83961L 10 9.1ZM 0 1L 20 1L 20 -1L 0 -1L 0 1ZM 19 0L 19 14L 21 14L 21 0L 19 0ZM 20 13L 0 13L 0 15L 20 15L 20 13ZM 1 14L 1 0L -1 0L -1 14L 1 14ZM -0.673041 0.739605L 6.66029 7.41294L 8.00637 5.93373L 0.673041 -0.739605L -0.673041 0.739605ZM 6.66029 7.41294L 9.32696 9.83961L 10.673 8.36039L 8.00637 5.93373L 6.66029 7.41294ZM 0.706785 14.7074L 8.04012 7.38076L 6.62655 5.96591L -0.706785 13.2926L 0.706785 14.7074ZM 10.673 9.83961L 13.3397 7.41294L 11.9936 5.93373L 9.32696 8.36039L 10.673 9.83961ZM 13.3397 7.41294L 20.673 0.739605L 19.327 -0.739605L 11.9936 5.93373L 13.3397 7.41294ZM 11.9599 7.38076L 19.2932 14.7074L 20.7068 13.2926L 13.3735 5.96591L 11.9599 7.38076Z"/> 
<path id="path3_stroke" d="M 31 16C 31 24.2843 24.2843 31 16 31L 16 33C 25.3888 33 33 25.3888 33 16L 31 16ZM 16 31C 7.71573 31 1 24.2843 1 16L -1 16C -1 25.3888 6.61116 33 16 33L 16 31ZM 1 16C 1 7.71573 7.71573 1 16 1L 16 -1C 6.61116 -1 -1 6.61116 -1 16L 1 16ZM 16 1C 24.2843 1 31 7.71573 31 16L 33 16C 33 6.61116 25.3888 -1 16 -1L 16 1Z"/> 
<path id="path4_fill" d="M 14.1918 12.3485C 13.5819 11.7464 12.8206 11.7464 12.2146 12.3485C 11.7523 12.8068 11.2901 13.2652 10.8356 13.7313C 10.7113 13.8595 10.6064 13.8867 10.4549 13.8012C 10.1558 13.6381 9.83731 13.506 9.54986 13.3273C 8.20972 12.4844 7.08711 11.4007 6.0927 10.1811C 5.59937 9.57513 5.16043 8.92645 4.85356 8.19621C 4.7914 8.04861 4.80306 7.9515 4.92348 7.83109C 5.38573 7.3844 5.83632 6.92605 6.2908 6.46771C 6.92397 5.83069 6.92397 5.08491 6.28692 4.444C 5.92566 4.07888 5.56441 3.72153 5.20316 3.3564C 4.83025 2.98351 4.46123 2.60674 4.08443 2.23773C 3.47457 1.64344 2.71322 1.64344 2.10725 2.24162C 1.64111 2.69996 1.1944 3.16996 0.720498 3.62053C 0.281555 4.03615 0.0601415 4.54499 0.0135281 5.13929C -0.0602765 6.10647 0.176675 7.01927 0.510738 7.90877C 1.1944 9.74992 2.23543 11.3852 3.49788 12.8845C 5.20316 14.9121 7.23861 16.5163 9.61978 17.6738C 10.6919 18.1943 11.8028 18.5944 13.0109 18.6604C 13.8422 18.7071 14.5647 18.4973 15.1435 17.8486C 15.5397 17.4058 15.9864 17.0019 16.4059 16.5785C 17.0274 15.9492 17.0313 15.1879 16.4137 14.5664C 15.6756 13.8245 14.9337 13.0865 14.1918 12.3485Z"/> 
<path id="path5_fill" d="M 13.4498 9.25198L 14.8832 9.00727C 14.6579 7.69051 14.0364 6.49803 13.0925 5.55027C 12.0942 4.55201 10.8317 3.92276 9.44109 3.72855L 9.2391 5.16961C 10.3151 5.3211 11.294 5.80663 12.067 6.5796C 12.7973 7.30985 13.275 8.2343 13.4498 9.25198Z"/> 
<path id="path6_fill" d="M 15.6912 3.02197C 14.0364 1.36726 11.9427 0.322395 9.63143 0L 9.42944 1.44107C 11.426 1.72073 13.2362 2.62577 14.6657 4.0513C 16.0214 5.40691 16.9109 7.11987 17.2333 9.00375L 18.6667 8.75904C 18.2899 6.57608 17.2605 4.5951 15.6912 3.02197Z"/> 
<path id="path7_stroke_2x" d="M 14.1918 12.3485L 14.897 11.6395L 14.8943 11.6369L 14.1918 12.3485ZM 12.2146 12.3485L 12.9187 13.0586L 12.9194 13.0579L 12.2146 12.3485ZM 10.8356 13.7313L 10.1196 13.0332L 10.1177 13.0351L 10.8356 13.7313ZM 10.4549 13.8012L 10.9462 12.9302L 10.94 12.9267L 10.9338 12.9233L 10.4549 13.8012ZM 9.54986 13.3273L 9.01744 14.1738L 9.02194 14.1766L 9.54986 13.3273ZM 6.0927 10.1811L 5.3172 10.8124L 5.31765 10.813L 6.0927 10.1811ZM 4.85356 8.19621L 5.77546 7.80879L 5.77518 7.80814L 4.85356 8.19621ZM 4.92348 7.83109L 4.22857 7.11198L 4.22243 7.11792L 4.21638 7.12396L 4.92348 7.83109ZM 6.2908 6.46771L 5.58155 5.76275L 5.58071 5.7636L 6.2908 6.46771ZM 6.28692 4.444L 5.57605 5.14733L 5.57768 5.14897L 6.28692 4.444ZM 5.20316 3.3564L 5.91403 2.65306L 5.91025 2.64928L 5.20316 3.3564ZM 4.08443 2.23773L 4.78412 1.52328L 4.78234 1.52155L 4.08443 2.23773ZM 2.10725 2.24162L 2.80837 2.95466L 2.80976 2.95329L 2.10725 2.24162ZM 0.720498 3.62053L 1.40805 4.34667L 1.40954 4.34525L 0.720498 3.62053ZM 0.0135281 5.13929L -0.983412 5.06109L -0.983573 5.0632L 0.0135281 5.13929ZM 0.510738 7.90877L 1.4482 7.56067L 1.44689 7.55719L 0.510738 7.90877ZM 3.49788 12.8845L 4.2632 12.2409L 4.26283 12.2404L 3.49788 12.8845ZM 9.61978 17.6738L 9.18258 18.5732L 9.18304 18.5734L 9.61978 17.6738ZM 13.0109 18.6604L 13.0669 17.662L 13.0655 17.6619L 13.0109 18.6604ZM 15.1435 17.8486L 14.3982 17.1818L 14.3973 17.1829L 15.1435 17.8486ZM 16.4059 16.5785L 17.1163 17.2823L 17.1174 17.2812L 16.4059 16.5785ZM 16.4137 14.5664L 17.123 13.8615L 17.1226 13.8612L 16.4137 14.5664ZM 13.4498 9.25198L 12.4643 9.42127L 12.6334 10.4058L 13.6181 10.2377L 13.4498 9.25198ZM 14.8832 9.00727L 15.0515 9.99301L 16.0376 9.82466L 15.8689 8.83863L 14.8832 9.00727ZM 13.0925 5.55027L 13.801 4.8446L 13.7996 4.84315L 13.0925 5.55027ZM 9.44109 3.72855L 9.57941 2.73816L 8.58952 2.59991L 8.45077 3.58974L 9.44109 3.72855ZM 9.2391 5.16961L 8.24878 5.0308L 8.11006 6.02052L 9.09969 6.15985L 9.2391 5.16961ZM 12.067 6.5796L 12.7741 5.87248L 12.067 6.5796ZM 15.6912 3.02197L 16.3991 2.31572L 16.3983 2.31484L 15.6912 3.02197ZM 9.63143 0L 9.76958 -0.990411L 8.77983 -1.12847L 8.64111 -0.138811L 9.63143 0ZM 9.42944 1.44107L 8.43912 1.30225L 8.3003 2.29267L 9.29072 2.4314L 9.42944 1.44107ZM 14.6657 4.0513L 15.3728 3.34417L 15.3718 3.34321L 14.6657 4.0513ZM 17.2333 9.00375L 16.2476 9.17244L 16.4163 10.1577L 17.4016 9.98948L 17.2333 9.00375ZM 18.6667 8.75904L 18.835 9.74477L 19.8225 9.57618L 19.6521 8.58895L 18.6667 8.75904ZM 14.8943 11.6369C 14.4394 11.1878 13.855 10.897 13.2017 10.897C 12.5479 10.897 11.9636 11.1882 11.5098 11.6391L 12.9194 13.0579C 13.0716 12.9067 13.1709 12.897 13.2017 12.897C 13.233 12.897 13.3343 12.9072 13.4892 13.0601L 14.8943 11.6369ZM 11.5105 11.6384C 11.0482 12.0967 10.58 12.5611 10.1196 13.0332L 11.5516 14.4294C 12.0002 13.9693 12.4564 13.5169 12.9187 13.0586L 11.5105 11.6384ZM 10.1177 13.0351C 10.1207 13.0321 10.1487 13.0031 10.2011 12.9692C 10.257 12.933 10.3441 12.8888 10.4594 12.8658C 10.7149 12.8147 10.8992 12.9037 10.9462 12.9302L 9.96363 14.6722C 10.1621 14.7842 10.4747 14.9023 10.8516 14.827C 11.2023 14.7568 11.4332 14.5516 11.5535 14.4275L 10.1177 13.0351ZM 10.9338 12.9233C 10.5874 12.736 10.2943 12.6165 10.0778 12.478L 9.02194 14.1766C 9.38033 14.3955 9.72431 14.5402 9.9761 14.6791L 10.9338 12.9233ZM 10.0823 12.4808C 8.82647 11.6973 7.8232 10.7239 6.86774 9.54916L 5.31765 10.813C 6.35102 12.0776 7.59297 13.2716 9.01745 14.1738L 10.0823 12.4808ZM 6.86819 9.54972C 6.402 8.97865 6.03975 8.45022 5.77546 7.80879L 3.93165 8.58362C 4.28111 9.40268 4.79674 10.1716 5.3172 10.8124L 6.86819 9.54972ZM 5.77518 7.80814C 5.77804 7.81493 5.84255 7.96353 5.80483 8.17724C 5.76587 8.39804 5.64858 8.5202 5.63057 8.53821L 4.21638 7.12396C 4.07795 7.26239 3.89463 7.4933 3.83527 7.82966C 3.77716 8.15893 3.86692 8.42989 3.93193 8.58428L 5.77518 7.80814ZM 5.61838 8.55019C 6.08979 8.09453 6.54792 7.62863 7.0009 7.17182L 5.58071 5.7636C 5.12472 6.22347 4.68166 6.67426 4.22857 7.11198L 5.61838 8.55019ZM 7.00005 7.17267C 7.45378 6.71618 7.76613 6.12945 7.76519 5.45591C 7.76425 4.78284 7.45068 4.19631 6.99615 3.73903L 5.57768 5.14897C 5.7602 5.3326 5.76516 5.43941 5.76519 5.45871C 5.76522 5.47754 5.76099 5.58222 5.58155 5.76275L 7.00005 7.17267ZM 6.99778 3.74067C 6.63273 3.37174 6.27148 3.01438 5.91402 2.65307L 4.49229 4.05974C 4.85734 4.42867 5.21859 4.78602 5.57606 5.14733L 6.99778 3.74067ZM 5.91025 2.64928C 5.54101 2.28008 5.16832 1.89962 4.78412 1.52328L 3.38475 2.95218C 3.75413 3.31386 4.11948 3.68694 4.49607 4.06353L 5.91025 2.64928ZM 4.78234 1.52155C 4.32638 1.07722 3.74288 0.791578 3.09297 0.7925C 2.44244 0.793422 1.85924 1.08129 1.40473 1.52995L 2.80976 2.95329C 2.96123 2.80377 3.06169 2.79255 3.0958 2.7925C 3.13053 2.79245 3.23263 2.80395 3.38653 2.95392L 4.78234 1.52155ZM 1.40612 1.52858C 0.928033 1.99888 0.487235 2.46291 0.0314533 2.89582L 1.40954 4.34525C 1.90157 3.87701 2.35419 3.40104 2.80837 2.95466L 1.40612 1.52858ZM 0.0329486 2.8944C -0.537201 3.46201 -0.910154 4.30307 -0.98341 5.06109L 1.01047 5.21748C 1.03044 4.78692 1.10031 4.61029 1.40805 4.34667L 0.0329486 2.8944ZM -0.983573 5.0632C -1.05633 6.19526 -0.776683 7.32112 -0.425418 8.26036L 1.44689 7.55719C 1.13003 6.71743 0.935774 6.01768 1.01063 5.21537L -0.983573 5.0632ZM -0.426719 8.25687C 0.298893 10.195 1.4294 11.9771 2.73293 13.5286L 4.26283 12.2404C 3.04147 10.7933 2.08991 9.30487 1.44819 7.56067L -0.426719 8.25687ZM 2.73257 13.5282C 4.50738 15.6304 6.70745 17.3636 9.18258 18.5732L 10.057 16.7745C 7.76977 15.6691 5.89893 14.1939 4.2632 12.2409L 2.73257 13.5282ZM 9.18304 18.5734C 10.3036 19.1159 11.604 19.5744 12.9563 19.659L 13.0655 17.6619C 12.0016 17.6144 11.0802 17.2728 10.0565 16.7742L 9.18304 18.5734ZM 12.9549 19.6589C 14.0134 19.7182 15.0618 19.4422 15.8896 18.5144L 14.3973 17.1829C 14.0676 17.5524 13.671 17.6959 13.0669 17.662L 12.9549 19.6589ZM 15.8887 18.5154C 16.2486 18.1111 16.6772 17.7249 17.1163 17.2823L 15.6956 15.8746C 15.2956 16.2788 14.8307 16.7006 14.3982 17.1818L 15.8887 18.5154ZM 17.1174 17.2812C 17.5696 16.8234 17.8717 16.2367 17.8745 15.5737C 17.8773 14.9088 17.5783 14.3196 17.123 13.8615L 15.7044 15.2713C 15.8667 15.4347 15.8746 15.5369 15.8745 15.5653C 15.8744 15.5957 15.8638 15.7043 15.6944 15.8758L 17.1174 17.2812ZM 17.1226 13.8612C 16.3827 13.1174 15.6389 12.3775 14.897 11.6395L 13.4865 13.0575C 14.2285 13.7955 14.9685 14.5316 15.7047 15.2717L 17.1226 13.8612ZM 13.6181 10.2377L 15.0515 9.99301L 14.7149 8.02154L 13.2816 8.26625L 13.6181 10.2377ZM 15.8689 8.83863C 15.6056 7.37124 14.8433 5.90734 13.801 4.8446L 12.3839 6.25594C 13.2295 7.08872 13.7102 8.00978 13.8975 9.17592L 15.8689 8.83863ZM 13.7996 4.84315C 12.6784 3.7404 11.1278 2.96759 9.57941 2.73816L 9.30278 4.71893C 10.5357 4.87792 11.51 5.36363 12.3854 6.25739L 13.7996 4.84315ZM 8.45077 3.58974L 8.24878 5.0308L 10.2294 5.30842L 10.4314 3.86736L 8.45077 3.58974ZM 9.09969 6.15985C 10.0194 6.27639 10.7106 6.61882 11.3599 7.28673L 12.7741 5.87248C 11.8774 4.99445 10.6108 4.36581 9.37851 4.17938L 9.09969 6.15985ZM 11.3599 7.28673C 11.99 7.89998 12.3269 8.55225 12.4643 9.42127L 14.4354 9.0827C 14.2232 7.91636 13.6046 6.71972 12.7741 5.87248L 11.3599 7.28673ZM 16.3983 2.31484C 14.6208 0.555794 12.2389 -0.632722 9.76958 -0.990411L 9.49328 0.990411C 11.6465 1.27751 13.452 2.17874 14.9841 3.72909L 16.3983 2.31484ZM 8.64111 -0.138811L 8.43912 1.30225L 10.4198 1.57988L 10.6217 0.138811L 8.64111 -0.138811ZM 9.29072 2.4314C 11.1292 2.67566 12.6521 3.43742 13.9596 4.75938L 15.3718 3.34321C 13.8203 1.81412 11.7229 0.765811 9.56816 0.450734L 9.29072 2.4314ZM 13.9586 4.75842C 15.2146 5.99783 15.963 7.43846 16.2476 9.17244L 18.219 8.83506C 17.8588 6.80129 16.8281 4.81599 15.3728 3.34417L 13.9586 4.75842ZM 17.4016 9.98948L 18.835 9.74477L 18.4984 7.7733L 17.065 8.01801L 17.4016 9.98948ZM 19.6521 8.58895C 19.2375 6.2567 18.0675 4.00457 16.3991 2.31572L 14.9832 3.72821C 16.4535 5.18562 17.3422 6.89546 17.6812 8.92913L 19.6521 8.58895Z"/> 
</defs> 
</svg>

Answer 1

Контуры кругов, соединяющих отрезков, стрелки нарисованы в Inkscape
В тегах <desc> посчитана длина для каждого элемента схемы.
Длина рассчитывается с помощью команды js getTotalLength() Ниже код для расчета, в него нужно подставлять свои значения path 

 <input  type="button" value="Total"  onclick="TotalLength()"/> 
    
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    xmlns:ev="http://www.w3.org/2001/xml-events" 
     width="100%" height="100%" viewBox="0 0 370 460" >  
  
         <path id="check" fill= "none" stroke ="grey" stroke-width ="1"  
          
		 d="m76.7 1044.1-9.6 4.7"/> 
</svg>  
   <script> 
         function TotalLength(){ 
          var path = document.querySelector('#check'); 
        var len = Math.round(path.getTotalLength() ); 
        alert("Длина пути - " + len); 
        }; 
  </script>

Пример схемы автора вопроса, сделанный в Inkscape 

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="90" height="129" viewBox="0 0 90 129" id="svg4171" version="1.1"> 
   
    <g id="layer1" transform="translate(0,-923.36216)" style="fill:none;stroke:crimson"> 
      <desc>length="77.24"</desc> 
	<circle id="crc-top" cx="35.1" cy="957.1" r="12.3"/> 
		 
	<desc>length="15.5"</desc> 
		  <path id="top-line" d="m35.1 944.5 0-15.3 0 0"  /> 
	 	 
	<desc>length="8.5"</desc> 
	  <path id="left-arrow" d="m35.1 929.7-5.8 4.9" /> 
       
  <desc>length="8.5"</desc> 
	  <path id="right-arrow" d="m35.1 928.8 5.5 6.3" /> 
     
 <desc>length="18"</desc> 
	  <path id="middle-line" d="m35.1 988 0-18.1"  /> 
	       
 
    <circle id="crc-bottom" r="12.3" cy="1001.1" cx="35.1"/> 
         
       <desc>length="77"</desc> 
	<path id="bottom-line"  d="m35.1 1013.2c0 16.4-0.9 24.1 3.1 28.1 5.2 5.2 16.2 3.3 35.5 3.1 6.8 0.6-4.5-2.9-6.3-3.6l0 0" /> 
    
   <desc>length="11"</desc> 
   <path id="bottom-arrow" d="m76.7 1044.1-9.6 4.7" /> 
     
  </g> 
</svg>

Пример анимации схемы 

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="190" height="258" viewBox="0 0 90 129" id="svg4171" version="1.1"> 
   
    <g id="layer1" transform="translate(0,-923.36216)" style="fill:none;stroke:crimson"> 
    <desc>length="77.24"</desc> 
	<circle id="crc-top" cx="35.1" cy="957.1" r="12.3" transform="rotate(-90 35.1 957.1)" stroke-dasharray="77.24" stroke-dashoffset="77.24"> 
	<animate id="an1" attributeName="stroke-dashoffset" begin="0.1s" values="77.24;0" dur="2s" fill="freeze"/> 
	</circle> 
	 
	<desc>length="15.5"</desc> 
	   
	  <path id="top-line" d="m35.1 944.5 0-15.3 0 0"  stroke-dasharray="15.5" stroke-dashoffset="15.5" > 
	    <animate id="an2" attributeName="stroke-dashoffset" begin="an1.end" values="15.5;0" dur="0.5s" fill="freeze"/> 
	</path> 
	 
	<desc>length="8.5"</desc> 
	  <path id="left-arrow" d="m35.1 929.7-5.8 4.9" stroke-dasharray="8.5" stroke-dashoffset="8.5"   > 
       <animate id="an3" attributeName="stroke-dashoffset" begin="an2.end" values="8.5;0" dur="1s" fill="freeze"/> 
	</path>  
	 
  <desc>length="8.5"</desc> 
	  <path id="right-arrow" d="m35.1 928.8 5.5 6.3"  stroke-dasharray="8.5" stroke-dashoffset="8.5"> 
       <animate id="an4" attributeName="stroke-dashoffset" begin="an2.end" values="8.5;0" dur="1s" fill="freeze"/> 
	</path> 	   
   
 <desc>length="18"</desc> 
	  <path id="middle-line" d="m35.1 988 0-18.1"  stroke-dasharray="18" stroke-dashoffset="18"> 
	     <animate id="an5" attributeName="stroke-dashoffset" begin="an4.end" values="18;0" dur="0.5s" fill="freeze"/> 
	</path>  
 
    <circle id="crc-bottom" r="12.3" cy="1001.1" cx="35.1" transform="rotate(-90 35.1 1001.1)" stroke-dasharray="77.24" stroke-dashoffset="77.24" > 
        <animate id="an6" attributeName="stroke-dashoffset" begin="an5.end" values="77.24;0" dur="3s" fill="freeze"/> 
	</circle> 
      
 
   <desc>length="77"</desc> 
	<path id="bottom-line" stroke-dasharray="77" stroke-dashoffset="77" d="m35.1 1013.2c0 16.4-0.9 24.1 3.1 28.1 5.2 5.2 16.2 3.3 35.5 3.1 6.8 0.6-4.5-2.9-6.3-3.6l0 0"  > 
   <animate id="an7" attributeName="stroke-dashoffset"  begin="an5.end" values="77;0" dur="3s" fill="freeze"/> 
   </path> 
   <desc>length="11"</desc> 
   <path id="bottom-arrow" d="m76.7 1044.1-9.6 4.7" stroke-dasharray="11" stroke-dashoffset="11"  > 
     <animate id="an8" attributeName="stroke-dashoffset"  begin="an7.end-0.7s" values="11;0" dur="1s" fill="freeze"/> 
   </path> 
  </g> 
</svg>

Answer 2

Анимация ссылки иконок

Код получился очень объемный, поэтому лучше опубликовать его по частям.

Анимация - рисование линий основана на изменении атрибута строки - stroke-dasharray от нуля до максимального значения.

Как я понимаю иконки нужны, чтобы реализовать ссылки перехода на другие страницы. Чтобы ссылка работала без проблем, её необходимо разместить внутри svg. 

<a xlink:href="https://mail.yandex.ru">

Анимация иконки письма показана ниже: 

<svg id="iconMail" width="100%" height="100%" viewBox="0 0 96 96"> 
  <a xlink:href="https://mail.yandex.ru"> 
  <rect width="100%" height="100%" stroke="none" fill="white" />  
 <g id="icon-mail" transform="translate(0 0)" stroke-dasharray="206" stroke-dashoffset="206" stroke="red" fill="none" stroke-width="0.5" > 
      <path  d="M5 9C5 9 5 10 5 10L5 22C5 23 5 23 6 23L27 23C28 23 28 23 28 22L28 10C28 10 28 9 28 9L17 19 5 9 5 9 5 9ZM6 8C5 8 4 9 4 10L4 22C4 23 5 24 6 24L27 24C28 24 29 23 29 22L29 10C29 9 28 8 27 8L6 8 6 8ZM17 18L27 9 7 9 17 18 17 18Z" > 
   <animate id="an9" attributeName="stroke-dashoffset" begin="0.1s" values="206;0" dur="3s" fill="freeze"/> 
	</path> 
  </g> 
   
  </a> 
  </svg>

Answer 3

Совместная анимация схемы и иконок

Код получился очень объемный, поэтому лучше опубликовать его по частям.

Анимация - рисование линий основана на изменении атрибута строки - stroke-dasharray от нуля до максимального значения.

Как я понимаю иконки нужны, чтобы реализовать ссылки перехода на другие страницы. Чтобы ссылка работала без проблем, её необходимо разместить внутри svg. 

<a xlink:href="https://mail.yandex.ru">

Анимация иконки письма показана ниже: 

<svg id="iconMail" width="100%" height="100%" viewBox="0 0 192 192"> 
  <a xlink:href="https://mail.yandex.ru"> 
  <rect width="100%" height="100%" stroke="none" fill="white" />  
 <g id="icon-mail" transform="translate(0 0)" stroke-dasharray="206" stroke-dashoffset="206" stroke="red" fill="none" stroke-width="0.5" > 
      <path  d="M5 9C5 9 5 10 5 10L5 22C5 23 5 23 6 23L27 23C28 23 28 23 28 22L28 10C28 10 28 9 28 9L17 19 5 9 5 9 5 9ZM6 8C5 8 4 9 4 10L4 22C4 23 5 24 6 24L27 24C28 24 29 23 29 22L29 10C29 9 28 8 27 8L6 8 6 8ZM17 18L27 9 7 9 17 18 17 18Z" > 
   <animate id="an9" attributeName="stroke-dashoffset" begin="iconMail.mouseover" values="206;0" dur="3s" fill="freeze"/> 
	</path> 
  </g> 
   
  </a> 
  </svg>

Анимация иконки громкоговорителя

Автор может выбрать любую, необходимую для проекта иконку. Я выбрал именно эту, чтобы показать технику выполнения нескольких последовательных анимаций.

Нескольким анимациям присваиваются уникальные идентификаторы: id="sp1", id="sp2", id="sp3" 

   <animate id="sp1" attributeName="stroke-dashoffset"  begin="speak.end;sp3.end" values="97;0" dur="0.8s" fill="freeze"/>   
    <animate id="sp2" attributeName="stroke-dashoffset"  begin="sp1.end" values="65;0" dur="0.4s" fill="freeze"/>   
 <animate id="sp3" attributeName="stroke-dashoffset"  begin="sp2.end" values="34;0" dur="0.2s" fill="freeze" />

У иконки громкоговорителя три волны, анимация второй волны начинается после окончания анимации первой волны: 

 begin="sp1.end"

Возврат к первой анимации волны после окончания третьей анимации: 

begin="speak.end;sp3.end"

Ниже весь код анимации : 

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="190" height="258" viewBox="0 0 90 129" id="svg4171" version="1.1">  
<svg version="1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" viewBox="0 0 48 48"> 
     
	<desc> length="97" </desc> 
	<path stroke="#81D4FA" stroke-width="0.3" fill="none" stroke-dasharray="97" stroke-dashoffset="97"   d="M28,7.1v2c7.3,1,13,7.3,13,14.9s-5.7,13.9-13,14.9v2c8.4-1,15-8.2,15-16.9S36.4,8.1,28,7.1z"> 
	  <animate id="sp1" attributeName="stroke-dashoffset"  begin="speak.end;sp3.end" values="97;0" dur="0.8s" fill="freeze"/> 
   </path>  
    
   <desc> length="65" </desc> 
   <path stroke="#4FC3F7" stroke-width="0.3" fill="none" stroke-dasharray="65" stroke-dashoffset="65" d="M28,12.2v2c4.6,0.9,8,5,8,9.8s-3.4,8.9-8,9.8v2c5.7-1,10-5.9,10-11.8S33.7,13.1,28,12.2z"> 
    <animate id="sp2" attributeName="stroke-dashoffset"  begin="sp1.end" values="65;0" dur="0.4s" fill="freeze"/> 
   </path>  
    
   <desc> length="97" </desc> 
   <path  stroke="#03A9F4" stroke-width="0.3" fill="none" stroke-dasharray="34"  stroke-dashoffset="34" d="M28,17.3v2.1c1.8,0.8,3,2.5,3,4.6s-1.2,3.8-3,4.6v2.1c2.9-0.9,5-3.5,5-6.7S30.9,18.2,28,17.3z"> 
     <animate id="sp3" attributeName="stroke-dashoffset"  begin="sp2.end" values="34;0" dur="0.2s" fill="freeze" /> 
   </path> 
    
    
   <g id="speaker"> 
	<path fill="#546E7A" d="M14,32H7c-1.1,0-2-0.9-2-2V18c0-1.1,0.9-2,2-2h7V32z"/> 
    <polygon fill="#78909C" points="26,42 14,32 14,16 26,6"/> 
    </g> 
   <animate id="speak" xlink:href="#speaker" attributeName="fill-opacity" from="0" to="1" dur="3s" fill="freeze" />  
  	 
</svg> 
</svg>

Собираем все элементы - части схемы и иконки:

Техника последовательных и параллельных анимаций позволяет очень гибко настроить логику схемы.

Допустим нам необходимо, чтобы сначала последовательно рисовалась линия и стрелка на конце её, затем параллельно рисовался круг и иконка внутри круга, затем снова стрелка, круг, другая иконка и т.д. Логику схемы легко поменять, изменяя последовательность начала и конца элементов анимаций.

Одновременный запуск двух анимации достигается применением одного и того же id предыдущей анимации ("an2.end"): 

<animate id="an3" attributeName="stroke-dashoffset" begin="an2.end" values="8.5;0" dur="1s" fill="freeze"/>  
 <animate id="an4" attributeName="stroke-dashoffset" begin="an2.end" values="8.5;0" dur="1s" fill="freeze"/>

Для встраивания иконок необходимо рассмотреть еще один момент

SVG иконки бывают очень разные, чтобы разместить их в нужном месте схемы и с требуемым размером, код иконки оборачивается во вложенные теги <svg> .. </svg> Это дает возможность масштабировать и позиционировать иконки с помощью атрибутов svg - viewBox, width, height 

 <svg id="iconMail" width="80%" height="80%" viewBox="0 0 96 96"> 
  <a xlink:href="https://www.yandex.ru/"> 
  <g id="icon-mail" transform="translate(30 67)" stroke-dasharray="206" stroke-dashoffset="206" stroke="teal" fill="none" stroke-width="0.5" > 
      <path  d="M5 9C5 9 5 10 5 10L5 22C5 23 5 23 6 23L27 23C28 23 28 23 28 22L28 10C28 10 28 9 28 9L17 19 5 9 5 9 5 9ZM6 8C5 8 4 9 4 10L4 22C4 23 5 24 6 24L27 24C28 24 29 23 29 22L29 10C29 9 28 8 27 8L6 8 6 8ZM17 18L27 9 7 9 17 18 17 18Z" > 
   <animate id="an9" attributeName="stroke-dashoffset" begin="an6.end" values="206;0" dur="2s" fill="freeze"/> 
	</path> 
  </g> 
  </a> 
  </svg>

Ниже полный код всей коллекции последовательных и параллельных анимаций:

Цветовую гамму можно легко изменить: 

 <g  transform="translate(0,-923.36216)" fill="none" stroke="darkcyan">  


<style> 
 
a svg:hover, circle:hover, path:hover, polygon:hover{ 
fill:green; 
stroke:yellow; 
} 
</style> 
 
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="190" height="258" viewBox="0 0 90 129" id="svg4171" version="1.1"> 
  <a xlink:href="http://ru.wikipedia.org/wiki/SVG" target="_blank"> 
    <g  transform="translate(0,-923.36216)" fill="none" stroke="darkcyan"> 
    <desc>length="77.24"</desc> 
	<circle id="crc-top" cx="35.1" cy="957.1" r="12.3" transform="rotate(-90 35.1 957.1)" stroke-dasharray="77.24" stroke-dashoffset="77.24"> 
	<animate id="an1" attributeName="stroke-dashoffset" begin="0.1s" values="77.24;0" dur="2s" fill="freeze"/> 
	</circle> 
		   
	  <path id="top-line" d="m35.1 944.5 0-15.3 0 0"  stroke-dasharray="15.5" stroke-dashoffset="15.5" > 
	    <animate id="an2" attributeName="stroke-dashoffset" begin="an1.end" values="15.5;0" dur="0.5s" fill="freeze"/> 
	</path> 
	 
	 
	  <path id="left-arrow" d="m35.1 929.7-5.8 4.9" stroke-dasharray="8.5" stroke-dashoffset="8.5"   > 
       <animate id="an3" attributeName="stroke-dashoffset" begin="an2.end" values="8.5;0" dur="1s" fill="freeze"/> 
	</path>  
	 
   
	  <path id="right-arrow" d="m35.1 928.8 5.5 6.3"  stroke-dasharray="8.5" stroke-dashoffset="8.5"> 
       <animate id="an4" attributeName="stroke-dashoffset" begin="an2.end" values="8.5;0" dur="1s" fill="freeze"/> 
	</path> 	   
   
  
	  <path id="middle-line" d="m35.1 988 0-18.1"  stroke-dasharray="18" stroke-dashoffset="18"> 
	     <animate id="an5" attributeName="stroke-dashoffset" begin="an4.end" values="18;0" dur="0.5s" fill="freeze"/> 
	</path>  
 
    <circle id="crc-bottom" r="12.3" cy="1001.1" cx="35.1" transform="rotate(-90 35.1 1001.1)" stroke-dasharray="77.24" stroke-dashoffset="77.24" > 
        <animate id="an6" attributeName="stroke-dashoffset" begin="an5.end" values="77.24;0" dur="3s" fill="freeze"/> 
	</circle> 
      
 
   <desc>length="77"</desc> 
	<path id="bottom-line" stroke-dasharray="77" stroke-dashoffset="77" d="m35.1 1013.2c0 16.4-0.9 24.1 3.1 28.1 5.2 5.2 16.2 3.3 35.5 3.1 6.8 0.6-4.5-2.9-6.3-3.6l0 0"  > 
   <animate id="an7" attributeName="stroke-dashoffset"  begin="an9.end" values="77;0" dur="3s" fill="freeze"/> 
   </path> 
   <desc>length="11"</desc> 
   <path id="bottom-arrow" d="m76.7 1044.1-9.6 4.7" stroke-dasharray="11" stroke-dashoffset="11"  > 
     <animate id="an8" attributeName="stroke-dashoffset"  begin="an7.end-0.7s" values="11;0" dur="1s" fill="freeze"/> 
   </path> 
   
  </g> 
  
 <title> Icon Mail </title> 
 
 <svg id="iconMail" width="80%" height="80%" viewBox="0 0 96 96"> 
  <a xlink:href="https://www.yandex.ru/"> 
  <g id="icon-mail" transform="translate(30 67)" stroke-dasharray="206" stroke-dashoffset="206" stroke="teal" fill="none" stroke-width="0.5" > 
      <path  d="M5 9C5 9 5 10 5 10L5 22C5 23 5 23 6 23L27 23C28 23 28 23 28 22L28 10C28 10 28 9 28 9L17 19 5 9 5 9 5 9ZM6 8C5 8 4 9 4 10L4 22C4 23 5 24 6 24L27 24C28 24 29 23 29 22L29 10C29 9 28 8 27 8L6 8 6 8ZM17 18L27 9 7 9 17 18 17 18Z" > 
   <animate id="an9" attributeName="stroke-dashoffset" begin="an6.end" values="206;0" dur="2s" fill="freeze"/> 
	</path> 
  </g> 
  </a> 
  </svg> 
  <!-- End icon Mail -->  
 
  <title> Icon Speaker</title> 
	 
	<svg version="1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  
	width="48" height="48" viewBox="0 0 96 96"> 
<a xlink:href="https://ru.stackoverflow.com/q/615562/28748">  
   <g transform="translate(45 45)"> 
	<path stroke="#81D4FA" stroke-width="0.7" fill="none" stroke-dasharray="97" stroke-dashoffset="97"   d="M28,7.1v2c7.3,1,13,7.3,13,14.9s-5.7,13.9-13,14.9v2c8.4-1,15-8.2,15-16.9S36.4,8.1,28,7.1z"> 
	  <animate id="sp1" attributeName="stroke-dashoffset"  begin="speak.end-2.5s;sp3.end" values="97;0" dur="1s" fill="freeze"/> 
   </path>  
    
    
   <path stroke="#4FC3F7" stroke-width="0.5" fill="none" stroke-dasharray="65" stroke-dashoffset="65" d="M28,12.2v2c4.6,0.9,8,5,8,9.8s-3.4,8.9-8,9.8v2c5.7-1,10-5.9,10-11.8S33.7,13.1,28,12.2z"> 
    <animate id="sp2" attributeName="stroke-dashoffset"  begin="sp1.end" values="65;0" dur="0.4s" fill="freeze"/> 
   </path>  
    
    
   <path  stroke="#03A9F4" stroke-width="0.5" fill="none" stroke-dasharray="34"  stroke-dashoffset="34" d="M28,17.3v2.1c1.8,0.8,3,2.5,3,4.6s-1.2,3.8-3,4.6v2.1c2.9-0.9,5-3.5,5-6.7S30.9,18.2,28,17.3z"> 
     <animate id="sp3" attributeName="stroke-dashoffset"  begin="sp2.end" values="34;0" dur="0.2s" fill="freeze" /> 
   </path> 
    
    
   <g id="speaker" fill-opacity="0" > 
	<path fill="#546E7A" d="M14,32H7c-1.1,0-2-0.9-2-2V18c0-1.1,0.9-2,2-2h7V32z"/> 
    <polygon fill="#78909C" points="26,42 14,32 14,16 26,6"/> 
    </g> 
   <animate id="speak" xlink:href="#speaker" attributeName="fill-opacity" values="0;0.25;0.5;0.75;1" begin="0.1s" dur="4s" fill="freeze" />  
  </g>	 
  </a> 
</svg> 
<!-- end icon speaker --> 
 
</svg>

READ ALSO
Как заменить несколько слов в строке? [дубликат]
javascript

Как заменить несколько слов в строке? [дубликат]

Данный вопрос уже был задан и имеет решение:

 211
Движение блока по параболе
javascript

Движение блока по параболе

С помощью jQuery animate делаю анимацию движения объекта, но нужно чтобы объект двигался по параболе, возможно ли это как-то сделать, задав лишь...

 276
Не могу подключить ключ api гугл карт
javascript

Не могу подключить ключ api гугл карт

Добрый деньНе получается подключить ключ api карт

 241
В чем разница? Window.onload
javascript

В чем разница? Window.onload

Если использовать

 181