- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我正在尝试对 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/
我有一个 SVG 路径,我正在尝试使用 stroke-dasharray/stroke-dashoffset 组合技巧对其进行动画处理以“绘制”自身(参见 this article更多信息)。但是,尽
我正在用 SVG 制作一个简单的动画 stroke-dashoffset以及一系列路径。 问题是:在没有动画的情况下,内联 SVG 有两个具有非常锐 Angular 的三 Angular 形,并且它们
我有 3 个 svg donut chart 表,每个图表都有一条用 stroke-dasharray 创建的线,所有图表加起来为 100%。 我希望每个图表都从最后一个图表结束的地方开始,所以第一个
我有 3 个 svg donut chart 表,每个图表都有一条用 stroke-dasharray 创建的线,所有图表加起来为 100%。 我希望每个图表都从最后一个图表结束的地方开始,所以第一个
我是 SVG 和动画的新手。刚刚创建了一条路径并想用动画绘制它,我正在使用“stroke-dashoffset”但它不起作用。这是我的 HTML:
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset 根据上面的链接,stroke-dashoffs
因此,我通过增加 stroke-dashoffset 值来为这个 SVG Logo 设置动画 svg { position: absolute; top: 50%; left: 50%; tr
我在使用 stroke-dasharray 和 stroke-dashoffset 使我的 SVG 路径设置动画时遇到了一些问题。路径长度用Js计算。下面我包含了一个 JsFiddle,它准确地显示了
我试图画一个 svg 圆。因为我需要使用 stroke-dashoffest 对其进行动画处理,所以圆圈的笔划仅沿逆时针方向填充。有什么办法可以按顺时针方向移动动画。 My Code:
制作动画 stroke-dashoffset我知道使用 CSS @keyframes移动 stroke-dashoffset SVG 路径。但是,因为我想用 background-size: cove
我正在尝试在 D3 中制作路径线动画。我可以让其他过渡起作用,例如淡入淡出效果,但在研究如何过渡路径之后,似乎最好的选择是通过修改它来使用笔画 dasharray var data = { "ty
它在 Google Chrome 中运行良好,但在 Mozilla Firefox 中我的 svg 路径突然出现! 怎么了? 正文: 风格: .ADM-SVG { fill:
我正在尝试在圆形 svg 上进行悬停过渡(不是完整的 360 度,大约 80%)。 根据我的理解,下面的代码应该可以,但是出于某种原因,它不只是指向零,而是添加了额外的迷你拱门。如何避免这种情况? .
即使我添加 -webkit- 前缀,Stroke-dashoffset 也无法在 safari 上运行。请帮我。谢谢!.... 这是我的示例代码.... #path1 { stroke-dasha
我正在尝试从 Javascript 绑定(bind) stroke-dashoffset。我想用变量 this.waittime 替换 20s。怎么做? this.waitime = 20; val
即使我添加 -webkit- 前缀,Stroke-dashoffset 也无法在 safari 上运行。请帮我。谢谢!.... 这是我的示例代码.... #path1 { stroke-dasha
我正在使用 Material Spinner 来显示进度状态。我希望未填充区域为灰色。 最佳答案 先画一个完整的灰色圆圈,不用stroke-dasharray。然后画出你不完整的圆圈(
我正在尝试对 SVG 进行动画处理,使其看起来像是使用 this answer 中描述的技术使用 clippath 和 dashoffset 绘制在屏幕上。期望的结果将是类似于 this codepe
即使我添加 -webkit- 前缀,Stroke-dashoffset 也无法在 safari 上运行。请帮我。谢谢!.... 这是我的示例代码.... #path1 { stroke-dasha
我正在尝试使用半径(rx,ry)在 svg 中创建一个矩形,在顶部和底部带有边框/笔触,并带有圆角。 通过使用 css 属性“dasharray: width, height”,可以仅使用边框/笔触设
我是一名优秀的程序员,十分优秀!