J'ai un SVG qui ressemble à ceci
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000" preserveAspectRatio="xMidYMid meet"> <g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none"> <path d="M405 5109 c-194 -28 -367 -205 -395 -404 -13 -92 -13 -1000 0 -1090 12 -78 47 -162 91 -217 l29 -37 -33 -44 c-45 -59 -75 -133 -87 -214 -13 -89 -13 -997 0 -1086 12 -81 42 -155 87 -214 l33 -43 -33 -43 c-45 -59 -75 -133 -87 -214 -13 -88 -13 -997 0 -1088 29 -204 201 -376 405 -405 42 -6 427 -10 948 -10 l877 0 0 160 0 160 -907 0 c-888 0 -909 1 -941 20 -18 11 -41 34 -52 52 -19 32 -20 52 -20 568 0 516 1 536 20 568 11 18 34 41 52 52 32 19 53 20 941 20 l907 0 0 160 0 160 -907 0 c-888 0 -909 1 -941 20 -18 11 -41 34 -52 52 -19 32 -20 52 -20 568 0 516 1 536 20 568 11 18 34 41 52 52 33 20 55 20 1848 20 1793 0 1815 0 1848 -20 59 -36 72 -71 72 -192 l0 -108 160 0 160 0 0 78 c-1 163 -33 279 -101 364 l-29 37 33 44 c45 59 75 133 87 214 13 88 13 997 0 1088 -29 204 -201 376 -405 405 -88 12 -3574 11 -3660 -1z m3683 -329 c18 -11 41 -34 52 -52 19 -32 20 -52 20 -568 0 -516 -1 -536 -20 -568 -11 -18 -34 -41 -52 -52 -33 -20 -55 -20 -1848 -20 -1793 0 -1815 0 -1848 20 -18 11 -41 34 -52 52 -19 32 -20 52 -20 568 0 516 1 536 20 568 11 18 34 41 52 52 33 20 55 20 1848 20 1793 0 1815 0 1848 -20z"/> <path d="M760 4308 c-112 -31 -149 -170 -68 -255 105 -110 296 -3 256 145 -12 44 -60 98 -97 107 -14 3 -33 8 -41 9 -8 2 -31 0 -50 -6z"/> <path d="M760 2708 c-112 -31 -149 -170 -68 -255 105 -110 296 -3 256 145 -12 44 -60 98 -97 107 -14 3 -33 8 -41 9 -8 2 -31 0 -50 -6z"/> <g class="loading"> <path d="M3728 2550 c-549 -49 -1007 -450 -1133 -992 -24 -103 -34 -266 -24 -385 20 -258 119 -499 287 -705 l75 -90 110 110 110 110 -51 61 c-102 123 -176 276 -208 430 -22 114 -15 343 15 446 94 327 348 583 672 675 115 33 449 41 449 10 0 -4 -34 -52 -76 -105 -70 -90 -74 -98 -57 -110 10 -7 65 -49 123 -94 58 -44 108 -77 112 -73 4 4 96 124 206 267 l199 259 -106 48 c-254 116 -469 158 -703 138z"/> <path d="M4636 2071 l-109 -109 52 -62 c102 -123 175 -275 206 -428 23 -114 17 -334 -13 -445 -41 -151 -153 -339 -263 -443 -111 -105 -275 -198 -416 -236 -118 -31 -443 -38 -443 -9 0 4 34 51 75 104 l75 97 -48 37 c-94 74 -192 148 -197 148 -3 0 -97 -119 -209 -265 l-203 -265 120 -53 c233 -103 363 -133 577 -133 149 0 262 16 385 56 452 148 788 531 871 995 20 113 20 330 -1 445 -35 194 -117 381 -241 545 -113 150 -92 148 -218 21z"/> </g> <path d="M760 1108 c-112 -31 -149 -170 -68 -255 105 -110 296 -3 256 145 -12 44 -60 98 -97 107 -14 3 -33 8 -41 9 -8 2 -31 0 -50 -6z"/> </g> </svg> </body> </html>
Je suis désolé que le message précédent ne soit pas clair. les flèches sont au bas de l'icône. Quand j'ai essayé de faire pivoter les flèches, elles tournent de manière erratique et vont partout sur l'écran.
Quelqu'un peut-il m'aider avec l'animation css ?. Je souhaite afficher ces flèches sous forme de flèches en rotation continue.
3 Réponses :
Vous pouvez travailler avec cette animation rotative:
svg {
animation: rotate 1s infinite linear;
}
@keyframes rotate {
from {transform:rotate(0deg);}
to {transform:rotate(359deg);}
}
Pour plus d'informations, consultez peut-être https://css-tricks.com/snippets/css/keyframe-animation-syntax/
Vous pouvez résoudre votre problème avec l'extrait de code ci-dessous.
<html>
<head>
<title></title>
<style>
.image {
-webkit-animation: spin 4s linear infinite;
-moz-animation: spin 4s linear infinite;
animation: spin 4s linear infinite;
}
@-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="255.373px" height="255.51px" class="image" viewBox="0 0 255.373 255.51"
enable-background="new 0 0 255.373 255.51" xml:space="preserve">
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)">
<path d="M1170.85,5105.209c-548.994-49.004-1007.002-450-1132.998-992.002c-24.004-102.998-33.999-265.996-24.004-385
c20-257.998,119.004-498.994,287.002-705l75-90l110,110l110,110l-50.996,61.006c-102.002,122.998-176.006,275.996-207.998,430
c-22.002,113.994-15,342.998,15,445.996c93.994,327.002,347.998,582.998,671.992,675c115,32.998,449.004,40.996,449.004,10
c0-4.004-34.004-52.002-75.996-105c-70-90-74.004-97.998-57.002-110c10-7.002,65-49.004,122.998-94.004
c57.998-43.994,107.998-76.992,112.002-72.998c3.994,4.004,95.996,124.004,205.996,267.002l199.004,259.004l-106.006,47.998
C1619.853,5083.208,1404.854,5125.209,1170.85,5105.209z" />
<path d="M2078.847,4626.206l-108.994-108.994l52.002-62.002c101.992-122.998,175-275,205.996-427.998
c22.998-114.004,17.002-334.004-12.998-445c-41.006-151.006-152.998-339.004-262.998-442.998
c-111.006-105-275-198.008-416.006-236.006c-117.998-30.996-442.998-37.998-442.998-8.994c0,3.994,34.004,50.996,75,103.994
l75,97.002l-47.998,37.002c-94.004,73.994-192.002,147.998-197.002,147.998c-2.998,0-97.002-119.004-209.004-265l-202.998-265
l120-52.998c232.998-102.998,362.998-133.003,577.002-133.003c149.004,0,262.002,16.001,385,56.001
c452.002,147.998,787.998,530.996,870.996,995c20,112.998,20,330-0.996,445c-35,194.004-117.002,380.996-240.996,545
C2183.847,4755.209,2204.853,4753.208,2078.847,4626.206z" />
</g>
</svg>
</body>
</html>
transform-origin: 50% 50% pour définir le point autour duquel le composant doit tourner.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M405 5109 c-194 -28 -367 -205 -395 -404 -13 -92 -13 -1000 0 -1090
12 -78 47 -162 91 -217 l29 -37 -33 -44 c-45 -59 -75 -133 -87 -214 -13 -89
-13 -997 0 -1086 12 -81 42 -155 87 -214 l33 -43 -33 -43 c-45 -59 -75 -133
-87 -214 -13 -88 -13 -997 0 -1088 29 -204 201 -376 405 -405 42 -6 427 -10
948 -10 l877 0 0 160 0 160 -907 0 c-888 0 -909 1 -941 20 -18 11 -41 34 -52
52 -19 32 -20 52 -20 568 0 516 1 536 20 568 11 18 34 41 52 52 32 19 53 20
941 20 l907 0 0 160 0 160 -907 0 c-888 0 -909 1 -941 20 -18 11 -41 34 -52
52 -19 32 -20 52 -20 568 0 516 1 536 20 568 11 18 34 41 52 52 33 20 55 20
1848 20 1793 0 1815 0 1848 -20 59 -36 72 -71 72 -192 l0 -108 160 0 160 0 0
78 c-1 163 -33 279 -101 364 l-29 37 33 44 c45 59 75 133 87 214 13 88 13 997
0 1088 -29 204 -201 376 -405 405 -88 12 -3574 11 -3660 -1z m3683 -329 c18
-11 41 -34 52 -52 19 -32 20 -52 20 -568 0 -516 -1 -536 -20 -568 -11 -18 -34
-41 -52 -52 -33 -20 -55 -20 -1848 -20 -1793 0 -1815 0 -1848 20 -18 11 -41
34 -52 52 -19 32 -20 52 -20 568 0 516 1 536 20 568 11 18 34 41 52 52 33 20
55 20 1848 20 1793 0 1815 0 1848 -20z"/>
<path d="M760 4308 c-112 -31 -149 -170 -68 -255 105 -110 296 -3 256 145 -12
44 -60 98 -97 107 -14 3 -33 8 -41 9 -8 2 -31 0 -50 -6z"/>
<path d="M760 2708 c-112 -31 -149 -170 -68 -255 105 -110 296 -3 256 145 -12
44 -60 98 -97 107 -14 3 -33 8 -41 9 -8 2 -31 0 -50 -6z"/>
<g class="running">
<path d="M3728 2550 c-549 -49 -1007 -450 -1133 -992 -24 -103 -34 -266 -24
-385 20 -258 119 -499 287 -705 l75 -90 110 110 110 110 -51 61 c-102 123
-176 276 -208 430 -22 114 -15 343 15 446 94 327 348 583 672 675 115 33 449
41 449 10 0 -4 -34 -52 -76 -105 -70 -90 -74 -98 -57 -110 10 -7 65 -49 123
-94 58 -44 108 -77 112 -73 4 4 96 124 206 267 l199 259 -106 48 c-254 116
-469 158 -703 138z"/>
<path d="M4636 2071 l-109 -109 52 -62 c102 -123 175 -275 206 -428 23 -114
17 -334 -13 -445 -41 -151 -153 -339 -263 -443 -111 -105 -275 -198 -416 -236
-118 -31 -443 -38 -443 -9 0 4 34 51 75 104 l75 97 -48 37 c-94 74 -192 148
-197 148 -3 0 -97 -119 -209 -265 l-203 -265 120 -53 c233 -103 363 -133 577
-133 149 0 262 16 385 56 452 148 788 531 871 995 20 113 20 330 -1 445 -35
194 -117 381 -241 545 -113 150 -92 148 -218 21z"/>
</g>
<path d="M760 1108 c-112 -31 -149 -170 -68 -255 105 -110 296 -3 256 145 -12
44 -60 98 -97 107 -14 3 -33 8 -41 9 -8 2 -31 0 -50 -6z"/>
</svg>
</body>
</html>
.running {
transform-box: fill-box;
transform-origin: 50% 50%;
animation: spin 3s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(-360deg); }
}
Remarque: la boîte de transformation ne fonctionne pas sur Edge ou IE voir https://developer.mozilla.org/en-US/docs/Web/CSS/transform-box pour plus d'informations.
Cher @shubhambhuyan, est-ce que je comprends clairement? Voulez-vous dire que la réponse ne doit pas modifier le SVG que vous avez publié dans la question actuelle?
oui, cela ne devrait pas changer le SVG. J'ai en fait changé le SVG et téléchargé l'original maintenant. Donc, ce nouveau devrait aider.
Cher @shubhambhuyan, je vois le nouveau SVG, voulez-vous que le cercle tourne?
Oui, je veux juste que le cercle tourne. J'ai essayé plusieurs façons, il tourne sur toute l'icône / l'écran.
@shubhambhuyan, j'ai déjà vu quelque chose comme toi. la technique de CSS ce nom était SMIL. mais pour cette exigence, vous avez deux problèmes critiques. 1 : vous devez sélectionner chemin numéro 4 et 5 (le cercle) pour injecter le style en utilisant CSS 2 : faire pivoter chaque partie (je veux dire chaque partie du cercle) autour du centre du cercle. Les deux sont si durs mais ce n'est pas impossible. s'il vous plaît, donnez-moi du temps. Je vais le réparer pour vous environ 3 heures plus tard.
Oui, j'ai essayé de trouver comment faire pivoter des chemins spécifiques autour de son centre. Je n'ai rien trouvé qui fonctionne. Merci @AmerllicA d'avoir investi votre temps là-dedans et de m'avoir aidé.
Cher @shubhambhuyan, pour faire pivoter une pièce, vous pouvez utiliser transform: rotate (169deg); transform-box: fill-box; origine de la transformation: 69px 85px; . (les chiffres sont des exemples). mais le nombre devrait se fixer exactement. mais je m'inquiète de la sélection. Je vais faire le CSS mais sélectionner le chemin numéro 4 et numéro 5 est si difficile à mes yeux.
pour cela, nous pouvons faire quelque chose comme ceci,
Ça marche!!!!! .loading {transform-box: fill-box; origine de la transformation: 50% 50%; animation: rotation linéaire infinie de 1,5 s; } @keyframes rotate {0% {transform: rotate (0deg); } 100% {transformation: rotation (360deg); }} Ceci sert le but, Merci @AmerllicA, ne serait pas possible sans votre aide.
Cher Frère @shubhambhuyan, merci pour votre attention et toutes mes réponses sont un devoir et vous êtes le bienvenu, désolé pour ma réponse tardive. Ma femme veut que je passe un peu de temps pour une petite conversation 😅, Parce que vous êtes un débutant sur Stack Overflow, je vous recommande de modifier ma réponse, puis de la marquer comme la bonne réponse. Laissez les autres développeurs chercher et trouver le bon chemin à l'avenir. ( Ma demande : Veuillez ne pas voter pour moi, cochez simplement la bonne réponse )
J'ai édité la réponse. Merci de m'avoir guidé, et un grand merci d'avoir trouvé une solution.
Ravi de voir cette solution de travail! Je ne savais pas du tout que c'était possible. Alors aussi un grand merci et un vote positif! J'ai testé cela dans plusieurs navigateurs et cela fonctionne pour moi sur Chrome / Safari et FF. Seulement dans Edge 18, il tourne toujours sur le mauvais axe. Quant à IE11, il ne bouge pas. Peut-être une idée si cela pourrait éventuellement être corrigé en eux (ou au moins dans Edge)?
@Nick Van Loocke, merci pour votre commentaire. J'avais essayé de contourner le problème pour que cela fonctionne. nous devons utiliser -webkit-, -moz-, -ms- . Malheureusement, IE et Edge ne prennent pas en charge transformation-box ( developer.mozilla.org/en-US/docs/Web/CSS/transform-box ), sans cela, ce ne sera peut-être pas possible car il faudra toute la boîte contenant l'icône, au lieu de la boîte carrée qui entoure le cercle.