【发布时间】：2021-02-23 23:21:44
【问题描述】：
我正在尝试在我的 SVG 设计中创建这样一种循环图标序列。 我尝试为每个路径使用动画延迟，但所有路径都是同时执行的。
这是我的代码笔：https://codepen.io/ioiocodepen/pen/oNYGwgE
HTML：
<div class="badgeconsul">
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" version="1.1">
<metadata id="metadata19">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs id="defs17">
<pattern id="EMFhbasepattern" patternUnits="userSpaceOnUse" width="6" height="6" x="0" y="0" />
</defs>
<g id="g12">
<path d="m445.273 216.464c-2.573-6.131-5.003-11.922-5.003-16.823 0-4.903 2.43-10.694 5.003-16.826 3.724-8.875 7.575-18.052 5.403-27.604-2.254-9.913-10.212-16.936-17.233-23.131-4.832-4.264-9.396-8.292-11.386-12.415-2.061-4.27-2.383-10.449-2.726-16.991-.484-9.252-1.032-19.739-7.25-27.524-6.248-7.823-16.378-10.686-25.317-13.211-6.278-1.774-12.209-3.45-15.875-6.377-3.627-2.896-6.558-8.281-9.661-13.982-4.456-8.187-9.506-17.466-18.582-21.845-8.917-4.302-18.783-2.582-28.326-.917-6.488 1.131-12.617 2.2-17.304 1.135-4.386-.997-9.29-4.521-14.481-8.253-7.631-5.484-16.279-11.7-26.535-11.7-10.258 0-18.907 6.216-26.539 11.7-5.192 3.732-10.097 7.256-14.484 8.254-4.688 1.066-10.817-.003-17.305-1.134-9.542-1.663-19.41-3.383-28.328.919-9.076 4.379-14.126 13.66-18.583 21.848-3.103 5.702-6.034 11.087-9.661 13.983-3.666 2.928-9.597 4.604-15.875 6.378-8.938 2.526-19.07 5.389-25.317 13.213-6.216 7.785-6.764 18.271-7.247 27.522-.342 6.542-.664 12.72-2.724 16.99-1.989 4.122-6.553 8.15-11.385 12.414-7.021 6.196-14.979 13.218-17.231 23.131-2.171 9.55 1.68 18.726 5.404 27.6 2.573 6.13 5.003 11.921 5.003 16.822 0 4.903-2.43 10.694-5.003 16.826-3.724 8.875-7.575 18.052-5.403 27.604 2.254 9.913 10.212 16.935 17.233 23.131 4.832 4.264 9.396 8.292 11.386 12.415 2.061 4.27 2.383 10.449 2.726 16.991.484 9.252 1.032 19.739 7.25 27.524 6.248 7.823 16.378 10.686 25.317 13.211 6.279 1.773 12.209 3.449 15.875 6.376 2.361 1.885 4.426 4.827 6.436 8.221l-50.551 118.106c-1.079 2.521-.696 5.43.999 7.586 1.695 2.155 4.432 3.215 7.136 2.762l41.975-7.035 24.194 35.376c1.406 2.056 3.73 3.266 6.189 3.266.243 0 .488-.012.733-.036 2.724-.267 5.086-1.997 6.164-4.513l49.865-116.497c6.429 4.378 13.578 8.327 21.751 8.327s15.322-3.948 21.752-8.325l49.865 116.495c1.077 2.517 3.439 4.246 6.164 4.513.245.024.489.036.733.036 2.459 0 4.783-1.21 6.189-3.266l24.194-35.376 41.975 7.035c2.704.453 5.441-.605 7.136-2.762 1.695-2.156 2.078-5.065.999-7.586l-50.552-118.099c2.013-3.4 4.08-6.348 6.444-8.235 3.666-2.928 9.597-4.604 15.875-6.378 8.938-2.526 19.069-5.389 25.316-13.212 6.216-7.785 6.764-18.271 7.247-27.523.342-6.542.664-12.72 2.724-16.99 1.989-4.123 6.553-8.15 11.385-12.414 7.021-6.196 14.978-13.218 17.231-23.13 2.171-9.551-1.68-18.727-5.404-27.6zm-269.305 272.528-19.188-28.057c-1.649-2.412-4.55-3.645-7.43-3.163l-33.166 5.559 40.756-95.213c3.229 4.68 7.139 8.884 12.414 11.429 2.862 1.381 5.822 2.136 8.836 2.477l-20.92 48.552c-1.639 3.804.116 8.216 3.92 9.855.967.417 1.974.614 2.964.614 2.904 0 5.669-1.698 6.891-4.534l23.951-55.585c.897-.152 1.792-.306 2.684-.462 6.489-1.132 12.616-2.2 17.304-1.135 2.11.48 4.342 1.548 6.666 2.939zm186.682-31.22c-2.88-.481-5.781.751-7.43 3.163l-19.188 28.057-45.681-106.721c2.326-1.393 4.56-2.463 6.672-2.943 4.688-1.066 10.816.002 17.306 1.133.888.155 1.781.309 2.674.46l23.953 55.59c1.222 2.837 3.987 4.534 6.891 4.534.991 0 1.997-.197 2.964-.614 3.804-1.639 5.559-6.052 3.92-9.855l-20.922-48.555c3.019-.341 5.982-1.096 8.847-2.478 5.271-2.543 9.18-6.743 12.407-11.419l40.753 95.208zm73.4-217.033c-1.18 5.192-6.693 10.057-12.529 15.208-5.735 5.061-11.666 10.294-14.97 17.144-3.372 6.989-3.79 14.989-4.194 22.726-.401 7.675-.779 14.926-3.989 18.945-3.241 4.059-10.251 6.04-17.674 8.137-7.435 2.101-15.124 4.274-21.157 9.092-5.994 4.787-9.797 11.775-13.476 18.534-3.702 6.802-7.199 13.227-11.926 15.508-4.575 2.207-11.695.965-19.233-.348-7.661-1.335-15.584-2.716-23.207-.983-7.349 1.671-13.736 6.261-19.913 10.7-6.355 4.567-12.358 8.881-17.785 8.881-5.425 0-11.426-4.313-17.78-8.88-6.176-4.439-12.562-9.029-19.911-10.7-2.556-.581-5.144-.812-7.746-.812-5.159 0-10.368.908-15.46 1.796-7.537 1.314-14.657 2.557-19.231.35-4.727-2.28-8.223-8.705-11.925-15.506-3.678-6.758-7.482-13.747-13.476-18.533-6.033-4.817-13.722-6.989-21.157-9.09-7.422-2.097-14.433-4.078-17.674-8.136-3.21-4.021-3.589-11.271-3.991-18.948-.404-7.736-.823-15.736-4.195-22.726-3.305-6.849-9.235-12.082-14.971-17.143-5.837-5.151-11.351-10.016-12.531-15.209-1.105-4.86 1.67-11.473 4.608-18.475 3.034-7.231 6.171-14.708 6.171-22.63 0-7.921-3.138-15.397-6.172-22.627-2.938-7-5.713-13.612-4.609-18.47 1.18-5.192 6.693-10.058 12.53-15.208 5.735-5.061 11.666-10.294 14.969-17.143 3.372-6.99 3.79-14.989 4.194-22.726.401-7.676.779-14.926 3.989-18.945 3.241-4.059 10.252-6.04 17.674-8.138 7.435-2.101 15.124-4.273 21.156-9.091 5.994-4.787 9.797-11.775 13.476-18.535 3.702-6.802 7.199-13.227 11.926-15.508 4.574-2.208 11.694-.966 19.233.348 7.661 1.335 15.582 2.717 23.207.983 7.349-1.671 13.736-6.261 19.913-10.7 6.356-4.567 12.359-8.881 17.786-8.881 5.425 0 11.426 4.313 17.78 8.88 6.176 4.439 12.562 9.029 19.911 10.7 7.624 1.734 15.546.351 23.206-.985 7.538-1.314 14.656-2.556 19.231-.35 4.727 2.28 8.223 8.705 11.924 15.506 3.679 6.758 7.482 13.747 13.477 18.533 6.033 4.817 13.722 6.989 21.157 9.09 7.422 2.097 14.434 4.078 17.675 8.136 3.21 4.021 3.589 11.271 3.991 18.948.404 7.736.823 15.736 4.195 22.726 3.305 6.849 9.235 12.082 14.971 17.143 5.837 5.151 11.351 10.016 12.531 15.209 1.105 4.859-1.67 11.473-4.608 18.475-3.034 7.23-6.171 14.708-6.171 22.63s3.138 15.398 6.172 22.628c2.937 7 5.712 13.611 4.608 18.47z" id="path2" style="fill:#edf8f8;fill-opacity:1" />
<g id="archirotanti">
<path style="fill:#22b573;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.752163" d="m 390.76527,150.49067 c -9.52738,-27.83 -27.57928,-51.899204 -52.14993,-69.449654 -31.3401,-22.06343 -69.19894,-30.838658 -107.05778,-24.319917 -35.60236,6.0173 -66.94247,24.82136 -89.00589,53.152821 -8.02306,-9.77813 -8.02306,-9.77813 -8.02306,-9.77813 -2.25648,-2.757918 -6.76947,-1.253599 -7.02018,2.25651 -4.01154,48.3891 -4.01154,48.3891 -4.01154,48.3891 -0.25071,3.51009 3.76082,5.76658 6.26802,3.51009 37.60812,-31.08937 37.60812,-31.08937 37.60812,-31.08937 2.75793,-2.2565 1.50433,-6.76947 -2.25649,-7.02018 -11.03171,-0.75216 -11.03171,-0.75216 -11.03171,-0.75216 20.05767,-24.821369 48.1384,-41.118225 79.72921,-46.383361 34.34876,-5.766579 68.94822,2.005766 97.5304,22.314155 22.06343,15.544696 38.36028,37.106686 47.38624,62.178756 0.25071,1.25361 1.50432,1.75504 2.75793,1.50432 2.25648,-0.50144 4.76369,-1.00287 7.27089,-1.25359 1.50433,0 2.50721,-1.75505 2.00577,-3.25939 z" id="arco1" />
<path style="fill:#8cc63f;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.752163" d="m 121.23472,246.8187 c 9.52738,27.83 27.57928,51.8992 52.14993,69.44965 31.3401,22.06343 69.19894,30.83866 107.05778,24.31992 35.60236,-6.0173 66.94247,-24.82136 89.00589,-53.15282 8.02306,9.77813 8.02306,9.77813 8.02306,9.77813 2.25648,2.75792 6.76947,1.2536 7.02018,-2.25651 4.01154,-48.3891 4.01154,-48.3891 4.01154,-48.3891 0.25071,-3.51009 -3.76082,-5.76658 -6.26802,-3.51009 -37.60812,31.08937 -37.60812,31.08937 -37.60812,31.08937 -2.75793,2.2565 -1.50433,6.76947 2.25649,7.02018 11.03171,0.75216 11.03171,0.75216 11.03171,0.75216 -20.05767,24.82137 -48.1384,41.11823 -79.72921,46.38336 -34.34876,5.76658 -68.94822,-2.00576 -97.5304,-22.31415 -22.06343,-15.5447 -38.36028,-37.10669 -47.38624,-62.17876 -0.25071,-1.25361 -1.50432,-1.75504 -2.75793,-1.50432 -2.25648,0.50144 -4.76369,1.00287 -7.27089,1.25359 -1.50433,0 -2.50721,1.75505 -2.00577,3.25939 z" id="arco2" />
</g>
<g id="consulenze-ambientali" transform="matrix(0.32788442,0,0,0.32788442,178.62503,136.06477)" style="fill:#15364c;fill-opacity:1">
<path d="M 352,200 V 40 C 351.97266,17.917969 334.08203,0.0273438 312,0 H 40 C 17.917969,0.0273438 0.0273438,17.917969 0,40 v 160 c 0.0273438,22.08203 17.917969,39.97266 40,40 h 35.878906 l 37.601564,52.64844 c 2.01953,2.83984 5.64062,4.04687 8.95703,2.98437 3.32031,-1.0625 5.56641,-4.14844 5.5625,-7.63281 v -48 h 184 c 22.08203,-0.0273 39.97266,-17.91797 40,-40 z m -232,24 c -4.41797,0 -8,3.58203 -8,8 v 31.03125 L 86.511719,227.35156 C 85.011719,225.25 82.585938,224 80,224 H 40 C 26.746094,224 16,213.25391 16,200 V 40 C 16,26.746094 26.746094,16 40,16 h 272 c 13.25391,0 24,10.746094 24,24 v 160 c 0,13.25391 -10.74609,24 -24,24 z m 0,0" id="path6-9" style="fill:#15364c;fill-opacity:1" />
<path d="m 440,152 h -72 v 16 h 72 c 13.25391,0 24,10.74609 24,24 v 144 c 0,13.25391 -10.74609,24 -24,24 h -72 c -2.375,0 -4.625,1.05469 -6.14453,2.87891 L 336,393.90234 V 368 c 0,-4.41797 -3.58203,-8 -8,-8 H 184 c -13.25391,0 -24,-10.74609 -24,-24 v -80 h -16 v 80 c 0.0273,22.08203 17.91797,39.97266 40,40 h 136 v 40 c 0,3.36719 2.10937,6.37109 5.27734,7.51953 3.16407,1.14453 6.71094,0.1875 8.86719,-2.39844 L 371.74219,376 H 440 c 22.08203,-0.0273 39.97266,-17.91797 40,-40 V 192 c -0.0273,-22.08203 -17.91797,-39.97266 -40,-40 z m 0,0" id="path8" style="fill:#15364c;fill-opacity:1" />
<path d="m 200,256 h 224 v 16 H 200 Z m 0,0" id="path10-9" style="fill:#15364c;fill-opacity:1" />
<path d="m 200,304 h 224 v 16 H 200 Z m 0,0" id="path12-4" style="fill:#15364c;fill-opacity:1" />
<path d="m 376,208 h 48 v 16 h -48 z m 0,0" id="path14" style="fill:#15364c;fill-opacity:1" />
<g id="g10" transform="matrix(0.36300873,0,0,0.36300873,85.5,25.023355)" style="fill:#15364c;fill-opacity:1">
<g id="g8" style="fill:#15364c;fill-opacity:1">
<g id="g6-5" style="fill:#15364c;fill-opacity:1">
<path d="m 468.04,91.687 -205,-90 c -5.147,-2.26 -11.007,-2.249 -16.146,0.029 l -203,90 C 36.663,94.922 32,102.089 32,110 v 158 c 0,59.712 23.597,120.752 64.741,167.468 20.695,23.498 44.553,42.092 70.912,55.266 C 195.887,504.845 225.611,512 256,512 c 42.552,0 83.967,-13.773 119.769,-39.829 8.931,-6.5 10.902,-19.009 4.402,-27.94 -6.5,-8.931 -19.009,-10.901 -27.94,-4.402 C 323.313,460.875 290.037,472 256,472 159.701,472 72,374.766 72,268 V 123.01 L 255.04,41.86 440,123.062 V 268 c 0,36.829 -10.58,74.1 -30.597,107.782 -5.643,9.496 -2.52,21.768 6.976,27.411 9.497,5.643 21.768,2.52 27.411,-6.976 C 467.479,356.354 480,312.018 480,268 V 110 c 0,-7.936 -4.693,-15.122 -11.96,-18.313 z" id="path2-9" style="fill:#15364c;fill-opacity:1" />
<path d="M 351.385,157.503 227.379,312.451 157.864,245.586 c -7.961,-7.657 -20.622,-7.412 -28.279,0.549 -7.657,7.961 -7.412,20.622 0.549,28.279 l 70.485,67.798 c 0.028,0.027 0.057,0.054 0.085,0.082 7.299,6.939 16.746,10.707 26.754,10.707 0.537,0 1.074,-0.011 1.612,-0.033 10.601,-0.426 20.337,-5.015 27.415,-12.919 0.246,-0.275 0.484,-0.557 0.715,-0.845 L 382.615,182.496 c 6.902,-8.624 5.505,-21.21 -3.118,-28.112 -8.625,-6.902 -21.21,-5.506 -28.112,3.119 z" id="path4-1" style="fill:#15364c;fill-opacity:1" />
</g>
</g>
</g>
</g>
<g id="sanzioni-ambientali" transform="matrix(0.32888922,0,0,0.32888922,173.88687,120.51713)" style="fill:#15364c;fill-opacity:1">
<path d="M 161.144,234.5 H 158.8 a 6,6 0 0 0 0,12 h 2.346 a 6,6 0 0 0 0,-12 z" id="path2-5" style="fill:#15364c;fill-opacity:1" />
<path d="M 202.288,234.5 H 184.56 a 6,6 0 0 0 0,12 h 17.728 a 6,6 0 0 0 0,-12 z" id="path4" style="fill:#15364c;fill-opacity:1" />
<path d="M 353.169,234.5 H 226.084 a 6,6 0 0 0 0,12 h 127.085 a 6,6 0 0 0 0,-12 z" id="path6" style="fill:#15364c;fill-opacity:1" />
<path d="m 334.741,141.212 h 11.428 a 6,6 0 0 0 0,-12 h -11.428 a 6,6 0 0 0 0,12 z" id="path10" style="fill:#15364c;fill-opacity:1" />
<path d="m 258.418,141.212 h 32.822 a 6,6 0 0 0 0,-12 h -32.822 a 6,6 0 0 0 0,12 z" id="path12" style="fill:#15364c;fill-opacity:1" />
<path d="M 161.144,194.5 H 158.8 a 6,6 0 0 0 0,12 h 2.346 a 6,6 0 0 0 0,-12 z" id="path16" style="fill:#15364c;fill-opacity:1" />
<path d="M 202.288,194.5 H 184.56 a 6,6 0 0 0 0,12 h 17.728 a 6,6 0 0 0 0,-12 z" id="path18" style="fill:#15364c;fill-opacity:1" />
<path d="m 220.084,200.5 a 6,6 0 0 0 6,6 h 127.085 a 6,6 0 0 0 0,-12 H 226.084 a 6,6 0 0 0 -6,6 z" id="path20" style="fill:#15364c;fill-opacity:1" />
<path d="M 161.144,274.5 H 158.8 a 6,6 0 0 0 0,12 h 2.346 a 6,6 0 0 0 0,-12 z" id="path22" style="fill:#15364c;fill-opacity:1" />
<path d="M 202.288,274.5 H 184.56 a 6,6 0 0 0 0,12 h 17.728 a 6,6 0 0 0 0,-12 z" id="path24" style="fill:#15364c;fill-opacity:1" />
<path d="M 353.169,274.5 H 226.084 a 6,6 0 0 0 0,12 h 127.085 a 6,6 0 0 0 0,-12 z" id="path26" style="fill:#15364c;fill-opacity:1" />
<path d="M 161.144,314.5 H 158.8 a 6,6 0 0 0 0,12 h 2.346 a 6,6 0 0 0 0,-12 z" id="path28" style="fill:#15364c;fill-opacity:1" />
<path d="M 202.288,314.5 H 184.56 a 6,6 0 0 0 0,12 h 17.728 a 6,6 0 0 0 0,-12 z" id="path30" style="fill:#15364c;fill-opacity:1" />
<path d="M 161.144,354.5 H 158.8 a 6,6 0 0 0 0,12 h 2.346 a 6,6 0 0 0 0,-12 z" id="path32" style="fill:#15364c;fill-opacity:1" />
<path d="M 202.288,354.5 H 184.56 a 6,6 0 1 0 0,12 h 17.728 a 6,6 0 0 0 0,-12 z" id="path34" style="fill:#15364c;fill-opacity:1" />
<path d="m 100.382,298.484 a 6,6 0 0 0 -6,6 v 113.493 a 6,6 0 0 0 12,0 V 304.484 a 6,6 0 0 0 -6,-6 z" id="path36" style="fill:#15364c;fill-opacity:1" />
<path d="m 93.776,282.362 a 6,6 0 0 0 12,0 v -40.614 a 6,6 0 0 0 -12,0 z" id="path38" style="fill:#15364c;fill-opacity:1" />
<path d="m 99.776,225.362 a 6,6 0 0 0 6,-6 v -5.614 a 6,6 0 0 0 -12,0 v 5.614 a 6,6 0 0 0 6,6 z" id="path40" style="fill:#15364c;fill-opacity:1" />
<path d="m 433.015,353.606 a 8.775,8.775 0 0 0 -2.936,0.639 l -1.835,0.858 a 32.8,32.8 0 0 1 -29.079,-0.725 6,6 0 0 0 -2.808,-0.7 H 392.5 v -3.05 a 6,6 0 0 0 -12,0 v 3.05 h -4.142 a 6,6 0 0 0 -2.807,0.7 32.793,32.793 0 0 1 -29.079,0.725 l -1.835,-0.858 a 6.269,6.269 0 0 0 -8.439,2.967 l -17.952,41.246 a 6,6 0 0 0 -3.195,5.3 c 0,13.867 11.955,25.149 26.649,25.149 14.694,0 26.65,-11.282 26.65,-25.149 a 6,6 0 0 0 -3.2,-5.3 l -12.619,-28.994 a 44.76,44.76 0 0 0 27.256,-3.783 h 2.713 v 51.572 h -1.19 a 17.855,17.855 0 0 0 -17.854,17.853 v 5.143 a 6,6 0 0 0 6,6 l 38.087,0.013 a 6,6 0 0 0 6,-6 v -5.151 A 17.875,17.875 0 0 0 393.7,417.258 h -1.2 v -51.577 h 2.426 a 44.893,44.893 0 0 0 27.257,3.779 l -12.62,29 a 6,6 0 0 0 -3.2,5.3 c 0,13.867 11.955,25.149 26.65,25.149 14.695,0 26.65,-11.282 26.65,-25.149 a 6,6 0 0 0 -3.2,-5.3 l -17.952,-41.245 a 6,6 0 0 0 -5.496,-3.609 z m -93.315,21.035 10.063,23.119 h -20.126 z m 13.033,35.119 a 15.454,15.454 0 0 1 -26.066,0 z m 40.959,19.5 a 5.863,5.863 0 0 1 5.79,5 l -25.963,-0.009 a 5.856,5.856 0 0 1 5.792,-5 z m 39.324,-12.349 a 14.932,14.932 0 0 1 -13.034,-7.149 h 26.068 a 14.931,14.931 0 0 1 -13.035,7.147 z m -10.063,-19.151 10.062,-23.119 10.062,23.119 z" id="path42" style="fill:#15364c;fill-opacity:1" />
<path d="M 393.233,289.621 V 56.5 a 46.052,46.052 0 0 0 -46,-46 L 75.66,10.513 c -0.167,0 -0.332,-0.013 -0.5,-0.013 A 55.636,55.636 0 0 0 19.589,66.072 v 115.76 a 6,6 0 0 0 9.932,4.532 l 24.289,-21.07 19.653,20.672 a 6,6 0 0 0 4.258,1.866 5.924,5.924 0 0 0 4.311,-1.735 l 20.492,-20.283 16.209,18.986 v 249.7 a 6,6 0 0 0 9.748,4.686 l 29.07,-23.253 29.07,23.253 a 6,6 0 0 0 7.5,0 l 29.066,-23.251 29.063,23.251 a 6,6 0 0 0 7.5,0 l 23.526,-18.82 A 106.055,106.055 0 1 0 393.233,289.621 Z M 226.336,366.5 h 57.983 a 106.3,106.3 0 0 0 -3.4,40.375 l -24.927,19.941 -29.063,-23.251 a 6,6 0 0 0 -7.5,0 L 190.363,426.816 161.3,403.564 a 6,6 0 0 0 -7.5,0 l -23.07,18.453 V 143 a 6,6 0 0 0 -6,-6 6,6 0 0 0 -6,6 v 23.318 L 107.458,153.11 a 6,6 0 0 0 -8.784,-0.368 L 77.941,173.261 58.557,152.872 a 6,6 0 0 0 -8.281,-0.4 l -18.687,16.21 V 66.845 c 0,-24.381 19.951,-44.756 44.328,-44.339 a 43.624,43.624 0 0 1 42.816,43.566 V 103 a 6,6 0 0 0 6,6 6,6 0 0 0 6,-6 V 66.072 A 55.487,55.487 0 0 0 109.592,22.5 h 237.641 a 34,34 0 0 1 34,34 V 289.518 A 105.576,105.576 0 0 0 317.919,314.5 h -91.583 a 6.167,6.167 0 0 0 -6.249,5.815 6,6 0 0 0 6,6.185 h 79.757 a 106.283,106.283 0 0 0 -17.311,28 h -62.449 a 6,6 0 0 0 -6,6.185 6.167,6.167 0 0 0 6.252,5.815 z m 160.021,123 a 94.054,94.054 0 1 1 94.054,-94.054 94.16,94.16 0 0 1 -94.054,94.054 z" id="path44" style="fill:#15364c;fill-opacity:1" />
<g id="g6" transform="matrix(0.73272421,0,0,0.73272421,25.883239,-54.993514)" style="fill:#15364c;fill-opacity:1">
<path d="m 335.464,127.088 c -0.215,-3.81 -3.256,-6.851 -7.066,-7.066 -20.186,-1.13 -40.88,7.318 -56.763,23.201 -4.042,4.042 -7.602,8.395 -10.645,12.973 -8.316,12.51 -12.49,27.319 -12.49,42.34 v 47.045 l -8.914,-8.914 c -0.033,-17.093 -7.533,-34.312 -20.935,-47.712 -14.285,-14.286 -32.895,-21.884 -51.092,-20.865 -3.81,0.215 -6.851,3.256 -7.066,7.066 -1.025,18.185 6.58,36.807 20.865,51.092 13.357,13.358 30.506,20.868 47.544,20.95 l 14.759,14.76 c 3.12,3.119 4.838,7.267 4.838,11.679 v 29.767 c 0,4.107 3.164,7.688 7.269,7.811 4.247,0.128 7.731,-3.278 7.731,-7.497 V 206.99 c 17.562,-1.176 34.975,-9.35 48.764,-23.138 15.883,-15.883 24.339,-36.573 23.201,-56.764 z m -143.499,88.553 c -9.157,-9.157 -14.957,-20.842 -16.273,-32.353 11.511,1.317 23.196,7.116 32.353,16.273 9.157,9.157 14.957,20.842 16.274,32.354 -11.511,-1.318 -23.198,-7.118 -32.354,-16.274 z m 109.692,-42.396 c -10.756,10.755 -24.58,17.453 -38.111,18.695 1.242,-13.531 7.939,-27.354 18.695,-38.11 10.756,-10.756 24.579,-17.454 38.11,-18.695 -1.241,13.531 -7.938,27.354 -18.694,38.11 z" id="path4-9" style="fill:#15364c;fill-opacity:1" />
</g>
</g>
</g>
</svg>
<h3 id="title-consulenze-ambientali" class="section-subtitle text-center">
CONSULENZE e PARERI AMBIENTALI
</h3>
<h3 id="title-sanzioni-ambientali" class="section-subtitle text-center">
RICORSI PER SANZIONI AMBIENTALI
</h3>
</div>
CSS：
.badgeconsul svg {
height: 100%;
width: 100%;
}
.badgeconsul h3 {
font-weight: bold;
position: absolute;
margin: auto;
width: 100%;
}
@-webkit-keyframes rotating /* Safari and Chrome */ {
from {
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotating {
from {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
to {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#archirotanti {
-webkit-animation: rotating 3s linear infinite;
-moz-animation: rotating 3s linear infinite;
-ms-animation: rotating 3s linear infinite;
-o-animation: rotating 3s linear infinite;
animation: rotating 3s linear infinite;
transform-box: fill-box;
transform-origin: 50% 50%;
}
#arco1 {
fill: #8cc63f;
-webkit-animation: changecolorarco1 6s linear infinite;
-moz-animation: changecolorarco1 6s linear infinite;
-ms-animation: changecolorarco1 6s linear infinite;
-o-animation: changecolorarco1 6s linear infinite;
animation: changecolorarco1 6s linear infinite;
}
#arco2 {
fill: #22b573;
-webkit-animation: changecolorarco2 6s linear infinite;
-moz-animation: changecolorarco2 6s linear infinite;
-ms-animation: changecolorarco2 6s linear infinite;
-o-animation: changecolorarco2 6s linear infinite;
animation: changecolorarco2 6s linear infinite;
}
@keyframes changecolorarco1 {
0% {
fill: #22b573;
}
50% {
fill: #8cc63f;
}
100% {
fill: #22b573;
}
}
@keyframes changecolorarco2 {
0% {
fill: #8cc63f;
}
50% {
fill: #22b573;
}
100% {
fill: #8cc63f;
}
}
/* animazione paths icone servizi home */
@keyframes opacitypathicon {
0% {opacity: 0}
25% {opacity: 0.75}
50% {opacity: 1}
75% {opacity: 0.75}
100% {opacity: 0}
}
/* elementi icone da animare */
#consulenze-ambientali, #title-consulenze-ambientali {
opacity: 0;
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation: opacitypathicon 3s linear infinite;
-moz-animation: opacitypathicon 3s linear infinite;
-ms-animation: opacitypathicon 3s linear infinite;
-o-animation: opacitypathicon 3s linear infinite;
animation: opacitypathicon 3s linear infinite;
}
#sanzioni-ambientali, #title-sanzioni-ambientali {
opacity: 0;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
-o-animation-delay: 3s;
animation-delay: 3s;
-webkit-animation: opacitypathicon 3s linear infinite;
-moz-animation: opacitypathicon 3s linear infinite;
-ms-animation: opacitypathicon 3s linear infinite;
-o-animation: opacitypathicon 3s linear infinite;
animation: opacitypathicon 3s linear infinite;
}
我想做的是这样的：
path1 -> 从时间 0 开始 -> 不透明度 0，然后在 50% 不透明度为 100%，然后在 3 秒后不透明度再次变为 0 path2 -> 从 3 秒开始 -> 不透明度 0，然后在 50% 不透明度为 100%，然后在 3 秒后不透明度再次变为 0 等等……
为什么，以及如何在前一个显示然后隐藏（不透明度从 0 到 100，然后再次为 0）之后逐个显示/隐藏。
也许这不是做我想做的事的好方法。欢迎任何其他建议。 提前致谢。
【问题讨论】：
-
在 SMIL 中听起来很简单