Как анимировать пользовательский SVG с путем клипа и смещением тире?

Я пытаюсь анимировать SVG, чтобы он отображался на экране, используя метод, описанный в этот ответ с использованием clippath и dashoffset. Желаемым результатом будет эффект, аналогичный этой codepen. У меня есть два SVG, один из которых я использую для clipPath, а другой — SVG только для обводки. Как вы можете видеть в моей кодовой ручке, когда я пытаюсь использовать технику clipPath и dashoffset, ничего не происходит. выводится на экран. Я попытался возиться с установленными группами, но безуспешно.

Вот кодовая ручка, которую я использую: https://codepen.io/codingforthefuture/pen/OJJdVpm

Вот что у меня есть:

  .svgContain{
    width: 500px;
    height: auto;
    background: yellow;
  }

  .theOverlay {
    stroke-dasharray: 650;
    stroke-dashoffset: 650;
    animation: draw 2s linear infinite alternate;
  }

  @keyframes draw {
    to {
      stroke-dashoffset: 0;
    }
  }

<svg class="svgContain"
                viewBox="0 0 655.46808 173.05397"> 

                <clipPath id="clippy">
                    <!-- Main svg group and path -->
                    <g
                        transform="translate(272.17156,342.35662)">
                        <g
                        transform="matrix(0.05166316,0,0,-0.05166316,-272.30896,-90.258006)"
                        style="fill:#000000;stroke:none;stroke-width:0.68284208">
                        <path
                            d="m 4991,4825 c -195,-141 -502,-436 -624,-597 -117,-157 -176,-305 -179,-454 -2,-79 19,-135 72,-191 l 31,-32 -49,-103 c -27,-57 -62,-136 -78,-175 l -28,-73 -55,-16 c -159,-46 -251,-58 -461,-58 -236,-1 -339,14 -455,68 -92,42 -158,97 -342,283 l -152,153 89,60 89,60 38,-23 c 30,-17 53,-22 108,-22 64,0 77,4 150,44 44,24 118,73 165,109 80,61 440,415 481,474 l 19,26 -55,-14 c -31,-8 -59,-13 -63,-10 -10,6 -198,-27 -299,-53 -246,-63 -488,-193 -560,-300 -19,-28 -23,-47 -23,-111 v -77 l -101,-67 -101,-67 -85,30 c -127,46 -234,62 -418,62 -314,0 -680,-71 -1209,-236 -45,-14 -48,-14 -41,3 18,44 15,92 -13,186 l -28,99 -17,-59 c -29,-105 -26,-161 8,-202 14,-17 25,-34 25,-39 0,-5 -26,-17 -57,-27 C 647,3437 13,3206 3,3196 c -2,-1 5,-23 16,-47 11,-24 26,-61 34,-81 l 15,-37 164,66 c 545,219 1030,378 1373,453 55,12 105,23 112,25 7,2 26,-21 43,-51 28,-48 30,-58 21,-86 -18,-50 -13,-138 10,-188 35,-79 391,-411 415,-388 2,2 -9,38 -25,79 -15,41 -34,99 -41,129 -19,87 -121,291 -170,340 -39,39 -114,80 -146,80 -17,0 -59,79 -47,90 4,4 51,13 103,19 309,35 483,19 657,-64 62,-29 97,-57 245,-202 192,-188 257,-233 403,-282 90,-30 90,-30 109,-78 11,-26 41,-97 68,-157 42,-96 46,-111 34,-125 -8,-9 -26,-41 -40,-71 -33,-71 -33,-135 0,-242 61,-195 150,-310 459,-591 127,-116 307,-256 329,-257 4,0 5,10 2,23 -25,86 -67,267 -82,347 -28,154 -142,478 -230,651 -45,90 -158,168 -275,189 -35,7 -69,14 -74,15 -11,3 -120,244 -113,250 2,1 48,-1 103,-6 173,-16 393,5 599,57 189,48 389,129 826,336 l 115,55 81,-38 c 44,-21 127,-54 184,-73 l 104,-35 12,-59 c 17,-81 37,-116 102,-178 65,-63 185,-125 297,-156 71,-20 106,-22 315,-23 373,-2 563,15 749,65 l 44,11 -74,48 c -41,26 -137,85 -214,131 -77,46 -173,106 -214,133 -141,95 -407,208 -583,249 -88,21 -92,21 -164,4 -89,-21 -179,-65 -218,-104 l -27,-30 -131,49 c -72,27 -133,51 -135,53 -13,12 287,104 427,131 175,33 285,37 452,15 183,-23 368,-57 618,-111 l 185,-41 103,-109 103,-108 -10,-53 c -11,-59 -1,-130 25,-179 28,-55 195,-218 280,-275 94,-63 197,-111 315,-149 46,-15 119,-42 161,-62 72,-32 166,-63 196,-63 7,0 -8,25 -33,56 -25,30 -61,86 -80,124 -57,114 -186,290 -353,484 -71,81 -85,92 -176,137 -86,42 -107,49 -160,49 -34,0 -76,-4 -93,-9 -31,-9 -34,-7 -88,55 -31,35 -53,64 -48,64 4,0 123,-27 263,-60 258,-61 501,-115 665,-150 50,-11 145,-24 212,-29 148,-11 489,2 596,23 101,20 166,8 217,-40 82,-77 194,-95 367,-60 45,10 91,18 102,19 42,3 4,26 -127,77 -171,66 -248,75 -343,40 -33,-12 -63,-19 -66,-16 -9,9 -5,11 102,40 145,40 326,110 678,260 598,256 764,312 1067,361 99,16 145,9 191,-29 30,-25 40,-29 105,-40 30,-5 112,9 204,34 l 45,13 -83,23 c -138,37 -128,40 93,24 331,-24 519,-74 735,-194 52,-29 214,-130 360,-223 298,-190 340,-217 340,-210 0,2 -37,29 -82,58 -46,30 -168,112 -272,184 -105,71 -225,150 -268,176 l -77,47 57,7 57,7 -50,20 c -28,11 -80,21 -116,23 -42,2 -99,15 -155,35 -261,92 -711,128 -1032,80 -253,-37 -488,-96 -670,-169 -29,-11 -55,-21 -58,-21 -3,0 10,17 30,38 38,40 166,215 162,220 -5,5 -207,-78 -259,-106 -67,-36 -113,-91 -132,-156 -24,-80 -58,-103 -328,-213 -410,-167 -663,-241 -897,-262 -158,-14 -401,-20 -394,-10 3,5 13,9 22,9 48,0 286,90 442,168 l 175,87 -60,8 c -227,29 -418,43 -476,36 -220,-30 -259,-48 -306,-143 l -26,-53 -96,-22 -96,-21 -175,40 c -96,22 -263,63 -370,91 -677,175 -754,193 -995,235 -77,13 -155,24 -172,24 -18,0 -33,3 -33,8 0,4 47,38 104,75 l 104,68 39,-23 c 90,-55 158,-62 283,-27 130,35 255,117 482,315 131,115 458,436 458,451 0,5 -102,-3 -227,-18 -331,-40 -375,-47 -505,-85 -255,-73 -420,-162 -502,-270 -60,-78 -75,-120 -76,-205 v -66 l -152,-100 -153,-101 -83,-6 c -173,-13 -422,-66 -657,-138 -96,-29 -160,-55 -574,-237 -152,-67 -311,-131 -325,-131 -2,0 24,62 57,139 l 60,139 76,4 c 89,5 133,25 209,93 94,85 174,239 247,479 26,86 175,753 175,783 0,9 -23,-4 -89,-52 z M 8015,3330 c 4,-6 27,-21 53,-35 30,-16 38,-23 22,-20 -14,2 -53,9 -88,15 -35,6 -73,15 -85,19 -19,7 -16,10 23,19 61,13 68,14 75,2 z"
                            style="stroke-width:0.68284208" />
                        </g>
                    </g>
                </clipPath>

                <!-- stroke svg -->
                <g transform="translate(272.17156,342.35662)">
                    <path clip-path="url(#clippy)" class="theOverlay" fill="none" fill-opacity="1" stroke="#00e900" stroke-width="21.16666603" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-opacity="1"
                    d="m -254.51417,-254.83893 c 1.80631,0.0649 3.61265,0.12974 5.41899,0.19462 0.17817,0 0.40854,0.12599 0.53453,0 0.35648,-0.35649 -0.3565,-0.71259 0,-1.06908 0.126,-0.12599 0.37516,0.0797 0.53454,0 0.64143,-0.32072 0.96216,-1.28289 1.60361,-1.60362 0.50397,-0.25198 1.06908,-0.35636 1.60362,-0.53453 0.71272,-0.35636 1.43506,-0.6941 2.13815,-1.06908 5.82158,-3.10485 5.30532,-3.25598 11.22532,-5.3454 1.22322,-0.43172 2.50366,-0.68215 3.74178,-1.06908 1.61341,-0.50419 3.18216,-1.1512 4.81085,-1.60361 1.5828,-0.43966 3.22804,-0.62942 4.81085,-1.06908 1.62869,-0.45241 3.17096,-1.19364 4.81085,-1.60361 1.2223,-0.30557 2.50103,-0.31559 3.74178,-0.53454 1.78943,-0.31578 3.58255,-0.62838 5.34539,-1.06907 1.8047,-0.4512 3.54068,-1.15245 5.34539,-1.60362 8.4007,-2.10018 -0.87335,0.70768 5.34539,-1.0691 1.08354,-0.30956 2.09565,-0.88381 3.20723,-1.06907 0.52727,-0.0879 1.07445,0.0756 1.60362,0 0.72727,-0.10388 1.41088,-0.43064 2.13815,-0.53454 0.52917,-0.0756 1.07635,0.0879 1.60362,0 0.55579,-0.0926 1.04783,-0.44191 1.60362,-0.53454 0.52726,-0.0879 1.07946,0.10483 1.60361,0 0.39069,-0.0781 0.68256,-0.43791 1.06908,-0.53454 0.34572,-0.0864 0.71964,0.0699 1.06908,0 0.55251,-0.11049 1.04451,-0.46463 1.60362,-0.53453 0.88402,-0.11049 1.78406,0.0635 2.67269,0 12.06007,-0.86143 -0.34481,-0.0905 7.48355,-1.06908 0.88402,-0.11049 1.7991,0.17473 2.6727,0 0.55251,-0.11049 1.04783,-0.44191 1.60361,-0.53454 0.52727,-0.0879 1.07635,0.0879 1.60362,0 0.55579,-0.0926 1.0511,-0.42405 1.60362,-0.53454 0.34944,-0.0699 0.71964,0.0699 1.06908,0 0.55251,-0.11051 1.04783,-0.4419 1.60361,-0.53453 0.52727,-0.0879 1.07946,0.10483 1.60362,0 0.39068,-0.0781 0.67839,-0.45641 1.06908,-0.53454 0.86055,-0.17211 3.235,0 4.27631,0 3.38541,0 6.77083,0 10.15624,0 2.31634,0 4.63267,0 6.94901,0 0.53454,0 1.06908,0 1.60362,0 0.53454,0 1.08504,-0.12965 1.60361,0 0.24447,0.0611 0.29549,0.45484 0.53454,0.53454 0.33808,0.11268 0.72336,-0.0864 1.06908,0 0.38653,0.0966 0.69915,0.38655 1.06908,0.53453 1.60205,0.64083 1.96774,0.56222 3.74177,1.06908 0.54178,0.15478 1.06185,0.37976 1.60362,0.53454 2.11561,0.60447 4.38233,0.73271 6.41447,1.60361 0.34786,0.14909 3.92845,1.98909 4.27631,2.13815 1.21699,0.52158 1.6403,0.38082 2.67269,1.0691 0.20967,0.13976 0.33296,0.38333 0.53454,0.53454 0.51395,0.38545 1.11009,0.65778 1.60362,1.06908 0.9679,0.80658 1.66476,1.91674 2.6727,2.67269 0.31874,0.23905 0.78735,0.2528 1.06908,0.53453 0.45427,0.45427 0.6578,1.11009 1.06907,1.60362 0.48395,0.58073 1.06908,1.06907 1.60362,1.60361 0.35636,0.35637 0.665898,0.7667 1.069078,1.06909 1.560967,1.17072 0.735319,-0.26683 2.138157,1.60361 1.17072,1.56097 -0.26683,0.73533 1.60361,2.13816 0.31874,0.23905 0.72744,0.32955 1.06908,0.53454 0.55088,0.33053 1.06908,0.71272 1.60362,1.06908 0.53454,0.35635 1.14934,0.6148 1.60361,1.06907 0.28173,0.28173 0.25282,0.78736 0.53454,1.06908 0.28173,0.28173 0.71272,0.35636 1.06908,0.53454 0.71272,0.35636 1.4463,0.67373 2.13816,1.06908 0.85391,0.48795 1.699542,1.27923 2.672692,1.60362 0.50711,0.16903 1.08504,-0.12965 1.60362,0 0.38652,0.0966 0.68255,0.43791 1.06908,0.53454 0.34572,0.0864 0.717565,-0.0586 1.069077,0 0.724657,0.12077 1.409177,0.44341 2.138157,0.53453 0.707215,0.0884 1.425437,0 2.138156,0 1.959975,0 3.919953,0 5.87993,0 2.850875,0 5.70175,0 8.552625,0 1.247256,0 2.504146,0.15471 3.741772,0 0.72898,-0.0911 1.413499,-0.41376 2.138156,-0.53453 0.351512,-0.0586 0.71964,0.0699 1.069078,0 0.552513,-0.11051 1.056986,-0.39789 1.603618,-0.53454 1.93263,-0.48316 3.9473,-0.58592 5.879928,-1.06908 3.489791,-0.87245 -2.01958,-0.28703 2.672696,-1.06908 0.527267,-0.0879 1.076352,0.0879 1.603616,0 4.69228,-0.78205 -0.817091,-0.19663 2.672697,-1.06908 1.051464,-0.26286 2.165112,-0.23679 3.207234,-0.53454 1.463794,-0.41822 2.812518,-1.18539 4.276312,-1.60361 1.042125,-0.29775 2.149218,-0.29943 3.207234,-0.53454 0.550037,-0.12223 1.056987,-0.39789 1.603619,-0.53454 0.881414,-0.22036 1.791279,-0.31419 2.672693,-0.53454 0.363718,-0.0909 4.213839,-1.151 5.345391,-1.60362 0.369927,-0.14797 0.699153,-0.38657 1.069078,-0.53454 1.738807,-0.69552 3.606585,-0.90809 5.34539,-1.60361 1.109776,-0.44391 2.114989,-1.11817 3.207237,-1.60363 8.505615,-3.78026 -5.891985,3.08714 7.483545,-3.20722 1.441998,-0.67858 2.81148301,-1.51038 4.27631196,-2.13816 2.37438604,-1.01758 4.98746304,-1.51413 7.48354764,-2.13815 3.7799474,-0.94498 7.4832504,-2.13807 11.2253204,-3.20725 0.706387,-0.20182 1.441202,-0.30221 2.138156,-0.53454 0.377976,-0.12599 0.691102,-0.40854 1.069078,-0.53453 1.393908,-0.46464 2.871979,-0.63699 4.276312,-1.06908 9.23108,-2.84033 0.379581,-0.53991 9.621703,-2.67269 1.987989,-0.45876 3.900856,-1.10884 5.879929,-1.60361 0.71272,-0.1782 1.40918,-0.44342 2.13816,-0.53454 0.70721,-0.0884 1.42897,0.0709 2.13815,0 1.07845,-0.10784 2.12661,-0.45143 3.20724,-0.53454 2.60921,-0.20071 5.38807,0 8.01808,0 2.31634,0 4.64417,-0.2305 6.94901,0 1.1819,0.11819 1.66512,0.66604 2.6727,1.06908 1.56675,0.62669 3.2441,0.97689 4.81085,1.60361 0.36992,0.14796 0.67839,0.45641 1.06908,0.53454 0.52415,0.10483 1.10311,-0.1877 1.60361,0 0.97281,0.36481 1.72937,1.16824 2.6727,1.60361 1.38225,0.63797 2.87105,1.01809 4.27631,1.60362 1.4711,0.61296 2.7841,1.57858 4.27631,2.13815 1.37576,0.51591 2.85088,0.71273 4.27631,1.06907 0.71272,0.1782 1.46683,0.23617 2.13816,0.53454 0.94941,0.42198 1.68706,1.27508 2.6727,1.60364 0.623633,0.20786 2.962233,-0.15592 3.741773,0 0.39069,0.0781 0.6911,0.40854 1.06908,0.53454 0.169033,0.0563 0.361683,-0.0432 0.534543,0 0.54663,0.13665 1.04783,0.4419 1.60361,0.53453 0.52727,0.0879 1.07635,-0.0879 1.60362,0 0.55579,0.0926 1.05358,0.4123 1.60362,0.53454 1.05801,0.23511 2.14922,0.29943 3.20723,0.53454 1.99445,0.4432 1.09056,0.43622 2.6727,1.06908 1.5105,0.6042 3.23278,1.20909 4.81085,1.60361 1.76282,0.44072 3.58255,0.62838 5.34539,1.06907 1.38767,0.34693 3.50048,1.41642 4.81085,1.60362 0.70555,0.1008 1.43094,-0.0884 2.13815,0 0.72898,0.0911 1.41536,0.40313 2.13816,0.53455 2.47919,0.45076 5.01264,0.57489 7.48355,1.06907 0.55251,0.11051 1.0511,0.42404 1.60361,0.53454 0.34944,0.0699 0.72336,-0.0864 1.06908,0 0.38653,0.0966 0.6911,0.40855 1.06908,0.53454 0.16904,0.0564 0.37517,-0.0797 0.53454,0 0.22538,0.11269 0.30916,0.42185 0.53454,0.53454 0.15937,0.0797 0.37517,-0.0797 0.53454,0 0.22538,0.11269 0.30916,0.42185 0.53454,0.53454 0.15936,0.0797 0.40854,-0.12599 0.53454,0 0.12599,0.12599 -0.126,0.40855 0,0.53454 0.25198,0.25198 0.81709,-0.25198 1.06907,0 0.126,0.12599 0,0.35636 0,0.53454 0,0.17818 0.126,0.40855 0,0.53454 -0.12798,0.12798 -2.13815,-0.12152 -2.13815,0 0,0.25198 0.29548,0.45485 0.53454,0.53454 0.86191,0.2873 1.77651,0.38517 2.67269,0.53454 0.48746,0.0812 1.13693,-0.15557 1.60362,0 0.37797,0.12599 0.6911,0.40854 1.06908,0.53453 0.48736,0.16246 3.08766,0 3.74177,0 1.60362,0 3.20723,0 4.81085,0 0.71272,0 1.4326,0.1008 2.13816,0 0.55779,-0.0797 1.05698,-0.39788 1.60361,-0.53453 0.40938,-0.10235 2.41384,-0.12944 2.6727,0 0.57461,0.2873 0.99415,0.86592 1.60362,1.06907 0.23417,0.0781 3.85514,0.0842 4.27631,0 0.55251,-0.1105 1.04783,-0.44191 1.60362,-0.53454 0.70302,-0.11717 1.42543,0 2.13815,0 1.91735,0 3.98195,0.17255 5.87993,0 8.32267,-0.7566 -1.39243,-0.26103 5.87993,-1.06907 0.70836,-0.0787 1.4298,0.0787 2.13816,0 3.56558,-0.39618 1.6518,-0.54257 4.81085,-1.06908 0.35151,-0.0586 0.731,0.11269 1.06908,0 0.23905,-0.0797 0.35636,-0.35636 0.53454,-0.53454 0.89089,-0.17818 1.77116,-0.42185 2.67269,-0.53454 6.66448,-0.83306 5.72267,-0.27949 12.82894,-1.06908 0.90298,-0.10033 1.77881,-0.37201 2.67269,-0.53454 1.2224,-0.22225 4.55954,-0.70897 5.87993,-1.06907 1.0872,-0.29651 2.10221,-0.84808 3.20724,-1.06909 0.69888,-0.13978 1.4326,0.1008 2.13815,0 0.55779,-0.0797 1.06185,-0.37973 1.60362,-0.53454 0.70639,-0.20182 1.43177,-0.33271 2.13816,-0.53454 0.54177,-0.15478 1.04783,-0.44191 1.60361,-0.53454 0.52727,-0.0879 1.07946,0.10483 1.60362,0 0.39069,-0.0781 0.71272,-0.35634 1.06908,-0.53453 0.53454,0 1.07635,0.0879 1.60362,0 1.64268,-0.27377 3.18389,-1.24206 4.81085,-1.60362 1.05801,-0.23511 2.14922,-0.29943 3.20723,-0.53453 1.61103,-0.35801 3.24427,-1.08144 4.81085,-1.60362 0.53454,-0.17819 1.04783,-0.4419 1.60362,-0.53454 0.52727,-0.0879 1.07946,0.10483 1.60362,0 0.39068,-0.0781 0.67839,-0.4564 1.06907,-0.53453 1.18795,-0.2376 2.54665,0.19918 3.74178,0 0.55579,-0.0926 1.0511,-0.42405 1.60362,-0.53454 0.34944,-0.0699 0.71964,0.0699 1.06908,0 0.55251,-0.11052 1.06907,-0.35637 1.60361,-0.53454 2.13069,-0.71025 4.25521,-1.52125 6.41447,-2.13818 1.77403,-0.50686 2.13972,-0.42825 3.74177,-1.06907 1.8433,-0.73732 0.30891,-0.47813 2.6727,-1.06908 0.34572,-0.0864 0.731,0.11269 1.06908,0 0.37797,-0.12599 0.69915,-0.38655 1.06907,-0.53453 1.04631,-0.41852 2.13816,-0.71271 3.20724,-1.06908 1.06908,-0.35637 2.09566,-0.88381 3.20723,-1.06908 0.52727,-0.0879 1.07445,0.0756 1.60362,0 0.72727,-0.1039 1.41777,-0.39047 2.13815,-0.53453 0.17473,-0.035 0.36552,0.0563 0.53454,0 0.37798,-0.126 0.67839,-0.45641 1.06907,-0.53454 0.52417,-0.10483 1.07635,0.0879 1.60364,0 0.55579,-0.0926 1.06183,-0.37976 1.60361,-0.53454 0.70639,-0.20182 1.41349,-0.41375 2.13816,-0.53454 1.04304,-0.17385 3.15809,0 4.2763,0 0.35636,0 0.73101,0.11269 1.06907,0 0.23908,-0.0797 0.30917,-0.42185 0.53457,-0.53453 0.15936,-0.0797 0.35634,0 0.53453,0 0.53454,0 1.06908,0 1.60362,0 2.67269,0 5.34537,0 8.01806,0 1.95998,0 3.92674,-0.16278 5.87994,0 1.25558,0.10461 2.48505,0.44476 3.74177,0.53453 1.2441,0.0889 2.50071,-0.12411 3.74179,0 0.56065,0.0561 1.05698,0.39788 1.60361,0.53454 0.17285,0.0432 0.35878,-0.0293 0.53454,0 1.96501,0.3275 3.91996,0.71271 5.87994,1.06908 0.89387,0.16253 1.77649,0.38518 2.67269,0.53453 2.35863,0.3931 5.25666,0.4902 7.48353,1.60362 0.57462,0.28731 1.05275,0.73856 1.60364,1.06907 0.68328,0.40998 1.42541,0.71274 2.13815,1.06908 0.35636,0.1782 0.71271,0.35637 1.06907,0.53454 0.17817,0.17819 0.30917,0.42185 0.53454,0.53453 0.15936,0.0797 0.40854,-0.12599 0.53454,0 0.28173,0.28173 0.25281,0.78738 0.53454,1.06908 0.12599,0.12599 0.40854,-0.12597 0.53453,0 0.26729,0.26728 -0.26725,1.33636 0,1.60364 0.126,0.12599 0.53454,-0.1782 0.53454,0 0,0.17817 -0.53454,0.17817 -0.53454,0 0,-0.25199 0.35637,-0.35637 0.53454,-0.53454"
                    />
                </g>
            </svg>

svg animation css clip-path
person pjib12    schedule 19.11.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Похоже, структура svg где-то сломана. Я пропустил его через Inkscape и повторно применил обтравочную маску. Теперь это работает. Я немного упростил путь.

<svg class="svgContain" viewBox="0 0 655.47 173.05">

<clipPath id="clippy1">
<path d="m261.81 170.18c-10.234-7.4003-26.347-22.883-32.75-31.333-6.1407-8.24-9.2372-16.008-9.3947-23.828-0.10499-4.1463 0.9972-7.0854 3.7789-10.025l1.627-1.6795-2.5717-5.4059c-1.4171-2.9916-3.254-7.1379-4.0938-9.1848l-1.4696-3.8314-2.8866-0.83974c-8.345-2.4143-13.174-3.0441-24.195-3.0441-12.386-0.05247-17.792 0.73478-23.88 3.5689-4.8286 2.2043-8.2925 5.091-17.95 14.853l-7.9776 8.0301 9.3422 6.2981 1.9944-1.2072c1.5745-0.89223 2.7817-1.1546 5.6683-1.1546 3.359 0 4.0413 0.20993 7.8727 2.3093 2.3093 1.2596 6.1932 3.8314 8.6599 5.7208 4.1988 3.2015 23.093 21.781 25.245 24.878l0.99721 1.3646-2.8866-0.73478c-1.627-0.41988-3.0966-0.68229-3.3065-0.52484-0.52485 0.31491-10.392-1.4171-15.693-2.7817-12.911-3.3065-25.612-10.129-29.391-15.745-0.9972-1.4696-1.2071-2.4668-1.2071-5.8258v-4.0413l-10.602-7.0329-4.4612 1.5745c-6.6655 2.4143-12.281 3.254-21.938 3.254-16.48 0-35.689-3.7264-63.454-12.386-2.3618-0.73478-2.5192-0.73478-2.1519 0.15745 0.94472 2.3093 0.78727 4.8286-0.68229 9.7621l-1.4696 5.196-0.89224-3.0966c-1.522-5.5109-1.3646-8.45 0.41987-10.602 0.73478-0.89224 1.3121-1.7845 1.3121-2.0469 0-0.26241-1.3646-0.89223-2.9916-1.4171-6.613-2.0469-39.888-14.171-40.413-14.696-0.10497-0.052439 0.26242-1.2071 0.83975-2.4668 0.57733-1.2596 1.3646-3.2015 1.7845-4.2512l0.78727-1.9419 8.6074 3.464c28.604 11.494 54.059 19.839 72.061 23.775 2.8866 0.6298 5.5109 1.2071 5.8783 1.3121 0.36738 0.10499 1.3646-1.1022 2.2568-2.6767 1.4696-2.5193 1.5745-3.0441 1.1022-4.5137-0.94472-2.6242-0.68229-7.2428 0.52484-9.8671 1.837-4.1463 20.521-21.571 21.781-20.364 0.10499 0.10497-0.47236 1.9944-1.3121 4.1463-0.78726 2.1519-1.7845 5.196-2.1518 6.7705-0.9972 4.5661-6.3506 15.273-8.9224 17.845-2.0469 2.0469-5.9832 4.1988-7.6627 4.1988-0.89224 0-3.0966 4.1463-2.4668 4.7236 0.20993 0.20995 2.6767 0.68231 5.4059 0.99722 16.218 1.8369 25.35 0.9972 34.482-3.359 3.254-1.522 5.091-2.9916 12.859-10.602 10.077-9.8671 13.488-12.229 21.151-14.801 4.7236-1.5745 4.7236-1.5745 5.7208-4.0938 0.57733-1.3646 2.1519-5.091 3.5689-8.2401 2.2044-5.0385 2.4143-5.8258 1.7845-6.5606-0.41987-0.47236-1.3646-2.1519-2.0994-3.7264-1.732-3.7264-1.732-7.0854 0-12.701 3.2016-10.234 7.8727-16.27 24.09-31.018 6.6655-6.0882 16.113-13.436 17.267-13.488 0.20994 0 0.26242 0.52484 0.10499 1.2071-1.3121 4.5137-3.5165 14.013-4.3037 18.212-1.4696 8.0826-7.4528 25.088-12.071 34.167-2.3618 4.7236-8.2925 8.8174-14.433 9.9196-1.837 0.36739-3.6214 0.73478-3.8838 0.78727-0.57733 0.15745-6.2981 12.806-5.9307 13.121 0.10499 0.05247 2.5192-0.05246 5.4059-0.3149 9.0798-0.83975 20.626 0.26242 31.438 2.9916 9.9196 2.5193 20.416 6.7705 43.352 17.635l6.0357 2.8866 4.2512-1.9944c2.3093-1.1022 6.6655-2.8342 9.6571-3.8314l5.4584-1.837 0.62982-3.0966c0.89224-4.2512 1.9419-6.0882 5.3534-9.3422 3.4115-3.3065 9.7096-6.5606 15.588-8.1876 3.7264-1.0497 5.5634-1.1547 16.533-1.2071 19.577-0.10498 29.549 0.78726 39.311 3.4115l2.3093 0.57733-3.8838 2.5193c-2.1519 1.3646-7.1904 4.4612-11.232 6.8755-4.0413 2.4143-9.0798 5.5634-11.232 6.9804-7.4003 4.986-21.361 10.917-30.598 13.069-4.6186 1.1022-4.8286 1.1022-8.6074 0.20994-4.6711-1.1022-9.3947-3.4115-11.442-5.4584l-1.4171-1.5745-6.8755 2.5717c-3.7789 1.4171-6.9804 2.6767-7.0854 2.7817-0.6823 0.62981 15.063 5.4584 22.411 6.8754 9.1848 1.732 14.958 1.9419 23.723 0.78727 9.6046-1.2072 19.314-2.9916 32.435-5.8258l9.7096-2.1519 5.4059-5.7208 5.4059-5.6683-0.52483-2.7817c-0.57733-3.0966-0.0524-6.823 1.3121-9.3947 1.4696-2.8866 10.234-11.442 14.696-14.433 4.9335-3.3065 10.339-5.8258 16.533-7.8202 2.4143-0.78727 6.2456-2.2043 8.45-3.254 3.7789-1.6795 8.7124-3.3065 10.287-3.3065 0.36739 0-0.41988 1.3121-1.732 2.9391-1.3121 1.5745-3.2016 4.5137-4.1988 6.5081-2.9916 5.9832-9.7621 15.22-18.527 25.402-3.7264 4.2512-4.4612 4.8286-9.2372 7.1904-4.5137 2.2043-5.6158 2.5717-8.3975 2.5717-1.7845 0-3.9888-0.20994-4.881-0.47236-1.627-0.47237-1.7845-0.3674-4.6186 2.8866-1.627 1.837-2.7817 3.359-2.5192 3.359 0.20994 0 6.4556-1.4171 13.803-3.1491 13.541-3.2015 26.295-6.0357 34.902-7.8727 2.6242-0.57733 7.6102-1.2596 11.127-1.522 7.7677-0.57734 25.665 0.10499 31.281 1.2071 5.3009 1.0497 8.7124 0.41988 11.389-2.0994 4.3037-4.0413 10.182-4.986 19.262-3.1491 2.3618 0.52484 4.7761 0.94472 5.3534 0.9972 2.2043 0.15746 0.20993 1.3646-6.6655 4.0413-8.9748 3.464-13.016 3.9363-18.002 2.0994-1.732-0.62981-3.3065-0.9972-3.464-0.83974-0.47236 0.47236-0.26241 0.57733 5.3534 2.0994 7.6102 2.0994 17.11 5.7733 35.584 13.646 31.386 13.436 40.098 16.375 56.001 18.947 5.196 0.83976 7.6102 0.47236 10.025-1.522 1.5745-1.3121 2.0994-1.5221 5.5109-2.0994 1.5745-0.26243 5.8782 0.47236 10.707 1.7845l2.3618 0.68229-4.3562 1.2072c-7.2428 1.9419-6.718 2.0994 4.881 1.2596 17.372-1.2596 27.239-3.8838 38.576-10.182 2.7292-1.522 11.232-6.823 18.894-11.704 15.64-9.972 17.845-11.389 17.845-11.022 0 0.10499-1.942 1.5221-4.3038 3.0441-2.4143 1.5745-8.8174 5.8783-14.276 9.6571-5.5109 3.7264-11.809 7.8727-14.066 9.2373l-4.0413 2.4668 5.9832 0.73478-2.6242 1.0497c-1.4696 0.57732-4.1988 1.1022-6.0882 1.2071-2.2044 0.10499-5.196 0.78727-8.1351 1.837-13.698 4.8286-37.316 6.718-54.164 4.1988-13.279-1.9419-25.612-5.0385-35.165-8.8699-1.522-0.57734-2.8866-1.1022-3.0441-1.1022-0.15745 0 0.52486 0.89223 1.5745 1.9944 1.9944 2.0994 8.7124 11.284 8.5025 11.547-0.26243 0.26241-10.864-4.0938-13.593-5.5634-3.5164-1.8894-5.9307-4.7761-6.928-8.1876-1.2596-4.1987-3.0441-5.4059-17.215-11.179-21.519-8.7649-34.797-12.649-47.079-13.751-8.2925-0.73478-21.046-1.0497-20.679-0.52483 0.15746 0.26242 0.6823 0.47236 1.1547 0.47236 2.5192 0 15.011 4.7236 23.198 8.8174l9.1848 4.5662-3.1491 0.41987c-11.914 1.522-21.938 2.2568-24.983 1.8894-11.547-1.5745-13.593-2.5192-16.06-7.5053l-1.3646-2.7817-5.0385-1.1547-5.0385-1.1022-9.1848 2.0994c-5.0385 1.1547-13.803 3.3065-19.419 4.7761-35.532 9.1848-39.573 10.129-52.222 12.334-4.0413 0.68229-8.1351 1.2596-9.0273 1.2596-0.94472 0-1.732 0.15746-1.732 0.41989 0 0.20993 2.4668 1.9944 5.4584 3.9363l5.4584 3.5689 2.0469-1.2071c4.7236-2.8866 8.2925-3.254 14.853-1.4171 6.823 1.837 13.384 6.1407 25.297 16.533 6.8755 6.0357 24.038 22.883 24.038 23.67 0 0.26243-5.3534-0.15746-11.914-0.94472-17.372-2.0994-19.682-2.4668-26.505-4.4612-13.384-3.8314-22.043-8.5025-26.347-14.171-3.1491-4.0938-3.9363-6.2981-3.9888-10.759v-3.464l-7.9776-5.2484-8.0301-5.3009-4.3562-0.31491c-9.0798-0.68229-22.148-3.464-34.482-7.2428-5.0385-1.522-8.3975-2.8866-30.126-12.439-7.9776-3.5165-16.323-6.8755-17.057-6.8755-0.10498 0 1.2596 3.254 2.9916 7.2953l3.1491 7.2953 3.9888 0.20994c4.6711 0.26242 6.9804 1.3121 10.969 4.881 4.9335 4.4612 9.1323 12.544 12.964 25.14 1.3646 4.5137 9.1848 39.521 9.1848 41.095 0 0.47236-1.2071-0.20993-4.6711-2.7292zm158.71-78.464c0.20995-0.31491 1.4171-1.1022 2.7817-1.8369 1.5745-0.83976 1.9944-1.2071 1.1546-1.0497-0.73478 0.10499-2.7817 0.47236-4.6186 0.78727-1.837 0.3149-3.8314 0.78726-4.4612 0.9972-0.9972 0.36739-0.83975 0.52484 1.2072 0.9972 3.2016 0.68229 3.5689 0.73479 3.9363 0.10499z" stroke-width=".68284"/>
</clipPath>
<path d="m7.3486 82.481c58.814 29.741 113.35 26.463 169.49-7.8217 57.856-3.3195 121.91 54.751 180.56 26.715 60.467-28.657 141.24 1.8007 201.76 19.934 21.505 3.8446 87.98-8.6459 105.45-32.429" clip-path="url(#clippy1)" class="theOverlay" fill="none" stroke="#00e900" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
</svg>

person V.Volkov    schedule 19.11.2019
comment
Потрясающий! Я просто не знаю, как повторить это, если я создам еще один пользовательский SVG в inkscape и хочу его анимировать. Какие шаги вы предприняли, чтобы упростить путь? Код SVG из исходного вопроса был тем, что было выведено inkscape, когда я создавал графику, поэтому я до сих пор не уверен, как это воспроизвести. - person pjib12; 20.11.2019
comment
Чтобы упростить путь: Inkscape -> Путь -> Упростить (несколько раз). Но лучше сначала нарисовать его всего с несколькими контрольными точками. - person V.Volkov; 20.11.2019
comment
Но эта разметка выглядит намного проще, чем ваша. Надеюсь, так будет легче вникнуть. Пожалуйста, задавайте конкретные вопросы :) - person V.Volkov; 20.11.2019
comment
Когда я упростил основной svg, он исказил внешний вид. Когда я сохраняю svg, он добавляет все группы и другую информацию, связанную с inkscape. Как вы добились такого простого вывода svg и без групп? Если метод clippath работает для вашего примера, что не так с тем, что svg inkscape выводится в двух svg из-за вопроса, что он не работает, даже если два svg сами по себе будут отображаться на экране? - person pjib12; 21.11.2019
comment
U должен упростить только путь, UR будет анимировать :) Inkscape обычно сохраняет в своем собственном формате SVG, но там есть опция saveAs в простом SVG. Затем вы можете использовать инструмент svgminify.com для файла. - person V.Volkov; 22.11.2019
comment
Рад быть полезным :) - person V.Volkov; 22.11.2019