gpt4 book ai didi

css - 如何使用剪辑路径和 dashoffset 为自定义 SVG 设置动画?

转载 作者:太空宇宙 更新时间:2023-11-04 05:43:18 25 4
gpt4 key购买 nike

我正在尝试对 SVG 进行动画处理,使其看起来像是使用 this answer 中描述的技术使用 clippath 和 dashoffset 绘制在屏幕上。期望的结果将是类似于 this codepen 的效果。我有两个 SVG,一个是我用于 clipPath 的主要 SVG,另一个是仅描边 SVG。正如您在 my codepen 中看到的,当我尝试使用 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 结构在某处损坏了。我已经通过 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>

关于css - 如何使用剪辑路径和 dashoffset 为自定义 SVG 设置动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58942763/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com