如何为 SVG 的某些部分设置动画答案

【问题标题】：How to animate some part of an SVG如何为 SVG 的某些部分设置动画
【发布时间】：2020-05-19 02:31:04
【问题描述】：

我有一个看起来像这样的 SVG

<!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>

我很抱歉之前的帖子不清楚。箭头位于图标的底部。当我尝试旋转箭头时，它会不规律地旋转并覆盖整个屏幕。

有人可以帮我处理 CSS 动画吗？我想将这些箭头显示为连续旋转的箭头。

【问题讨论】：

标签： css css-animations svg-animate

【解决方案1】：

在<g> 标记中包含要应用CSS 动画的路径。
找到组件必须旋转的轴。在上述情况下，路径被封闭在一个正方形内，因此中心位于顶部的 50% 处和左侧的 50% 处。使用transform-origin: 50% 50% 设置组件必须绕其旋转的点。

.running {
        transform-box: fill-box;
        transform-origin: 50% 50%;
        animation: spin 3s linear infinite;
        }

        @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(-360deg); }
        }

<!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>

注意：转换框在 Edge 或 IE 上不起作用，请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/transform-box 了解更多信息。

【讨论】：

亲爱的@shubhambhuyan，我明白了吗？您的意思是答案不应该编辑您在当前问题中发布的 SVG？
它有效！！！！ .loading { transform-box: fill-box; transform-origin: 50% 50%; animation: rotate 1.5s infinite linear; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } <g class="loading"> <path d="...."/> <path d="...."/> </g> 达到目的，谢谢@AmerllicA，没有你的帮助是不可能的。
我已经编辑了答案。感谢您指导我，非常感谢您找到解决方案。
很高兴看到这个可行的解决方案！根本不知道这是可能的。所以也非常感谢和赞成！我已经在几个浏览器中对此进行了测试，这适用于我在 Chrome/Safari 和 FF 上。仅在 Edge 18 中，它仍然在错误的轴上旋转。至于IE11，它不动。也许知道这是否可以在它们中修复（或至少在 Edge 中）？
@Nick Van Loocke，感谢您的评论。我曾尝试过解决这个问题。我们必须使用-webkit- , -moz- , -ms-。不幸的是 IE 和 edge 不支持transformation-box (developer.mozilla.org/en-US/docs/Web/CSS/transform-box)，没有这个可能是不可能的，因为它会占用整个包围图标的框，而不是包围圆圈的方形框。

【解决方案2】：

您可以通过以下 sn-p 解决您的问题。

<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>

【讨论】：

【解决方案3】：

您可以使用这个旋转动画：

svg {
  animation: rotate 1s infinite linear;
}


@keyframes rotate {
   from {transform:rotate(0deg);}
   to {transform:rotate(359deg);}
}

【讨论】：