使用 css 为我的 svg 文件设置动画时遇到问题

Posted

技术标签:

【中文标题】使用 css 为我的 svg 文件设置动画时遇到问题【英文标题】：having issue animating my svg file using css 【发布时间】：2021-10-27 19:55:39 【问题描述】：

我发现了这个有趣的文档，它展示了如何使 svg 文件动画化。

https://css-tricks.com/svg-line-animation-works/

但是，我无法让我的项目在打开时看起来像是正在完成。

我希望我的项目动画类似于上述文档的第 8 节。请帮助

[新手]

https://jsfiddle.net/yoavf1bu/17/

.path 
  stroke-dasharray: 50;
  stroke-dashoffset: 500;
  animation: dash 5s linear forwards;


@keyframes dash 
  to 
    stroke-dashoffset: 0;
  

<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 200.000000 1000.000000"
 preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,900.000000) scale(0.100000,-0.100000)"
>
<path class="path" stroke="#000000" stroke-
 d="M3150 8544 c-208 -38 -355 -106 -479 -221 -40 -36 -75 -62 -80 -57
-4 5 -20 26 -35 48 -30 40 -93 75 -136 76 -41 0 -122 -44 -161 -86 -207 -230
-226 -724 -37 -939 53 -60 108 -88 175 -88 54 0 83 13 137 62 l29 26 -6 -75
c-20 -233 -161 -474 -261 -444 -37 11 -84 52 -132 117 -149 196 -182 227 -244
227 -61 0 -124 -53 -197 -167 -46 -73 -225 -423 -298 -583 -62 -135 -62 -136
-70 -128 -11 11 -57 268 -70 398 -34 315 -13 540 76 838 12 37 11 44 -1 52
-27 17 -54 -14 -110 -126 -65 -127 -111 -263 -144 -424 -70 -333 -90 -823 -41
-986 22 -76 48 -104 95 -104 48 0 86 30 142 114 23 33 42 62 43 64 1 1 18 -13
38 -33 39 -39 83 -47 110 -17 8 9 39 53 67 96 125 192 279 371 296 345 17 -29
17 -284 -1 -391 -34 -207 -88 -336 -244 -588 -174 -280 -289 -541 -337 -761
-14 -64 -19 -127 -19 -269 0 -171 2 -193 28 -293 54 -206 144 -388 284 -574
60 -81 77 -113 99 -183 57 -189 137 -405 254 -690 210 -508 252 -673 330
-1285 47 -366 77 -486 173 -685 91 -188 157 -268 198 -242 14 9 25 9 39 2 31
-17 50 -12 67 19 15 25 20 27 40 18 18 -8 27 -6 43 8 34 31 33 51 -9 148 -83
194 -90 278 -36 432 37 107 44 169 21 213 -19 37 -39 53 -121 97 -141 76 -140
74 -139 350 1 121 9 303 18 405 9 102 20 222 23 268 l6 82 -27 0 c-15 0 -29
-6 -31 -13 -11 -29 -46 -509 -52 -697 -9 -307 11 -367 145 -434 104 -52 132
-80 132 -127 0 -22 -12 -67 -26 -102 -36 -86 -52 -187 -42 -261 9 -68 41 -171
71 -231 19 -39 19 -40 0 -23 -40 36 -64 19 -56 -38 7 -46 -12 -50 -43 -9 -29
39 -48 44 -63 18 -10 -17 -12 -17 -27 2 -26 34 -132 257 -153 325 -33 99 -59
243 -92 500 -70 554 -120 761 -266 1120 -156 383 -186 459 -244 623 -32 92
-59 170 -59 174 0 3 35 -28 78 -68 265 -253 563 -473 1040 -769 l183 -113 63
-91 c472 -677 602 -958 831 -1791 36 -129 49 -155 79 -155 13 0 29 6 35 14 8
9 24 12 49 9 28 -4 44 0 65 17 15 12 27 28 27 36 0 9 11 14 30 14 17 0 39 9
51 21 27 27 23 73 -20 218 -41 139 -42 214 -1 319 45 118 54 169 40 222 -19
69 -64 105 -157 125 -43 9 -86 19 -96 23 -13 5 -36 51 -68 137 -110 289 -267
511 -462 658 -58 44 -245 163 -399 256 -15 9 -85 97 -155 196 -71 99 -190 266
-264 370 -273 382 -323 468 -322 560 1 64 18 116 141 415 86 210 113 320 113
470 0 152 -36 274 -120 403 -58 88 -118 143 -204 185 l-66 32 -25 82 c-44 144
-49 175 -43 271 14 262 212 597 411 699 60 31 143 35 192 10 103 -53 261 -257
461 -597 66 -111 75 -135 128 -320 68 -238 116 -377 157 -459 158 -315 449
-556 750 -621 75 -16 94 -13 101 17 7 24 -3 35 -151 151 -257 203 -474 482
-774 997 -82 141 -86 150 -141 350 -83 303 -133 452 -191 575 -63 133 -124
210 -197 250 -46 26 -64 30 -124 29 -90 -1 -161 -28 -275 -106 -424 -286 -879
-1098 -977 -1745 -22 -149 -22 -506 0 -663 19 -129 52 -304 63 -335 15 -43
-26 11 -90 118 -164 274 -225 555 -182 846 33 224 147 505 316 781 180 294
209 357 258 550 24 96 27 122 27 300 0 162 -3 201 -17 233 -13 29 -23 37 -43
37 -72 0 -150 -83 -340 -358 -73 -107 -78 -112 -95 -97 -10 9 -23 29 -30 45
-12 30 -7 43 161 395 62 131 189 366 229 426 45 65 103 119 129 119 30 0 67
-36 145 -139 130 -171 200 -222 283 -206 84 15 203 185 246 350 35 134 44 343
16 361 -17 10 -47 -7 -53 -30 -3 -12 -31 -46 -61 -76 -56 -52 -57 -52 -110
-48 -116 10 -196 133 -227 348 -35 249 68 546 214 621 64 33 113 10 166 -79
l19 -33 -38 -77 c-70 -141 -84 -292 -35 -364 18 -28 28 -33 68 -36 40 -3 48 0
71 28 15 17 31 47 37 68 17 61 12 199 -11 292 l-20 85 79 76 c61 59 100 87
173 123 173 85 368 115 529 81 121 -26 135 -25 135 5 0 38 -87 61 -245 65 -69
2 -136 1 -150 -1z m-543 -579 c6 -107 -9 -169 -42 -182 -64 -24 -62 177 2 302
l16 30 9 -25 c6 -14 12 -70 15 -125z m-1392 -987 c0 -195 4 -280 18 -368 21
-135 50 -277 70 -340 14 -44 13 -47 -16 -103 -34 -66 -102 -147 -123 -147 -7
0 -20 12 -28 28 -58 112 -45 624 24 963 17 85 51 219 54 219 1 0 1 -114 1
-252z m1622 -459 c126 -32 232 -221 353 -633 41 -139 46 -176 14 -114 -49 96
-206 311 -289 394 -107 107 -149 129 -248 122 -86 -5 -158 -42 -252 -130 -131
-122 -245 -322 -296 -517 -29 -114 -23 -268 15 -386 32 -101 32 -105 -2 -105
-45 0 -129 -29 -183 -61 -64 -40 -140 -126 -183 -208 -159 -305 -106 -641 119
-752 58 -28 71 -31 137 -27 93 5 169 39 243 109 164 155 176 350 44 728 -22
63 -37 116 -35 119 10 9 78 -42 127 -96 57 -64 120 -186 143 -278 9 -34 16
-103 16 -153 0 -158 -33 -275 -156 -562 -75 -177 -109 -301 -99 -367 13 -89
118 -256 464 -735 94 -131 171 -240 171 -242 0 -14 -465 291 -626 410 -197
145 -321 251 -475 405 l-146 145 -32 135 c-114 491 -115 903 -5 1295 36 129
145 396 225 558 252 502 591 882 844 943 65 16 59 16 112 3z m673 -1379 c204
-338 409 -592 625 -775 44 -38 82 -70 85 -72 3 -3 -9 -1 -25 3 -39 9 -232 107
-269 136 -128 101 -211 189 -281 298 -90 138 -129 233 -211 515 -10 32 8 8 76
-105z m-1290 -132 c92 -242 134 -450 112 -554 -24 -118 -86 -201 -192 -259
-48 -26 -65 -30 -130 -30 -65 1 -81 4 -122 30 -94 59 -151 186 -151 336 1 194
99 404 234 500 42 30 127 58 176 59 l41 0 32 -82z m1067 -2670 c146 -93 230
-157 306 -235 132 -134 244 -317 321 -525 61 -165 61 -165 189 -188 45 -8 79
-21 98 -37 25 -22 29 -31 29 -79 0 -36 -10 -80 -30 -132 -60 -158 -61 -195 -4
-396 19 -66 34 -126 34 -133 0 -19 -14 -16 -35 7 -11 12 -28 20 -39 18 -18 -3
-21 -11 -22 -51 0 -26 -4 -50 -8 -55 -10 -9 -36 27 -36 50 0 10 -7 21 -15 24
-22 9 -45 -14 -45 -44 0 -53 -19 -3 -70 183 -103 379 -211 676 -340 935 -93
188 -159 295 -423 692 -11 16 -16 28 -13 28 3 0 50 -28 103 -62z"/>
</g>
</svg>

【问题讨论】：

嗨，罗伯特，你检查了小提琴吗，我在转换文件时这样做了。但它没有给我结果。我想在你面前表现出它的形象。 @Shahryar Mohajer 感谢您的帮助.. 你知道我如何解决这个问题，让它看起来像在你面前揭幕吗？ 为了查看问题，您将fill="none" 添加到您的路径中。您没有一条线，而是一条填充的路径。请看一下这支笔，因为它或多或少可能是您想要实现的目标：codepen.io/giaco/pen/BbJdxB 正如@enxaneta 所说，您需要重新绘制 SVG 以使形状成为具有适当线宽的线。然后动画将起作用。目前，您的 SVG 是线条的填充轮廓。 【参考方案1】：

您的应用程序中干扰工作的原因有两个：

    要动画绘制一条从零到最大值的线，必须满足条件：stroke-dasharray= stroke="dashofffset" 你的价值观不同

    SVG 形状应使用单个轮廓绘制 你有一个双轮廓：

我在矢量编辑器中用单个轮廓绘制了你的形状：

我们将按照您的链接中指示的方式为该轮廓设置动画。

.path 
 fill:none;
 stroke:black;
 stroke-width:4;
 stroke-linecap:round;
  stroke-dasharray: 3500;
  stroke-dashoffset: 3500;
  animation: dash 10s linear forwards infinite;


@keyframes dash 
  to 
    stroke-dashoffset: 0;
  

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0"   viewBox="0 0 309 584">
  
  <path class="path" d="M215 31s-13-3-20-3c-7 1-14 2-20 5-5 2-11 6-15 11-4 4-8 9-10 15-2 5-4 11-3 16 0 3 7 7 8 2 2-4 2-10 2-14-1-7-2-13-6-18-2-3-5-6-8-6-6 0-11 6-14 11-3 4-4 10-5 16v22c1 5 3 10 6 14 3 3 7 6 11 6s7-3 9-5 3-8 4-6c2 5 0 11-1 16l-4 14c-2 4-4 8-7 10s-5 4-8 3c-5 0-7-5-10-8l-7-10c-2-2-4-5-7-5-5 1-9 7-11 10l-7 13-11 22-10 21-7 10c-2 1-4 2-6 1s-3-6-3-9l-1-13v-19l3-21 3-17 6-16 5-9-3 16-3 19 1 20a368 368 0 0 0 4 26c1 4 2 9 5 12 1 2 2 5 4 5 3-1 4-5 6-8l5-8 6-7 4-5c2-2 3-4 5-3 3 0 3 5 4 7l-2 13-1 16-4 10-7 14-6 9-4 9-7 12-5 15-3 10-2 15 1 20 5 15 8 16 12 16 15 15 18 14 24 19 28 17 18 10 20 15 14 17 11 21 2 7 5 5h8c3 1 5 3 6 5v8c-2 5-5 9-5 14l2 12 3 11 1 5-3 2c-2 0-3-4-5-3v4l-1 4-4-1c-1-2 1-5-1-5s1 8-2 7c-4-2-6-20-6-20l-6-18-7-18-8-18-7-15-12-16-6-11-5-9-12-18-19-26-14-20-7-12-2-4c-1-8 2-13 4-20l5-10c2-6 6-13 7-19v-18c-1-6-2-12-5-18l-8-10c-5-3-11-6-17-5-6 0-11 3-16 7-5 6-8 14-10 22-1 6-2 13 0 19 1 5 3 10 8 13 6 4 11 4 16 2 6-2 11-6 15-11 2-3 3-8 3-13 0-8-2-15-4-23l-4-12-5-12-2-7a56 56 0 0 1 4-30 68 68 0 0 1 18-24c4-3 7-6 12-7 5 0 9 3 13 6 5 3 9 9 13 15 5 6 8 14 12 20l16 26 15 24a250 250 0 0 0 31 34l8 6 3 2c-4 1-10-1-15-3-6-2-10-6-16-10s-11-9-15-15c-5-5-7-12-10-19-4-8-6-16-8-25l-7-25c-3-12-6-24-11-35-3-6-7-13-11-16-3-2-7-3-10-3-5 0-10 2-15 4l-16 14-13 17-10 18-11 19s-8 17-10 26l-5 25-1 25a253 253 0 0 0 5 35c2 11 5 21 9 32 3 10 12 29 12 29l9 23a361 361 0 0 0 13 62l2 17 3 13 4 12 5 8c2 4 2 13 7 12 2 0-2-5 0-6 2 0 2 5 4 6l2-1c2-2-1-7 2-8 2-1 2 6 5 5 2 0 0-5-1-7l-4-9-1-11 3-12 2-6-2-6-10-5-6-8-1-13 1-16 1-15 2-20" />
</svg>

【讨论】：

@Scatterinc 如果我的回答对您有帮助，请不要忘记将其标记为解决方案 谢谢@Alexandr_TT 我正在考虑用类似的东西进入 NFT 游戏.. 但是当我用代码笔检查你的项目时我改变了主意.. 你很狂野我的布雷达.. 你必须在 NFT 空间中？ @Scatterinc 谢谢！但我不明白你的评论什么是NFТ？ bbc.com/news/…. 它是真正的数字艺术.. 傻钱的人在那里购买..【参考方案2】：

你想要这样的东西吗：

.path 
  stroke-dasharray: 60000;
  stroke-dashoffset: 60000;
  animation: dash 10s linear forwards infinite;


@keyframes dash 
  to 
    stroke-dashoffset: 0;
  

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 200.000000 1000.000000"
 preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,900.000000) scale(0.100000,-0.100000)"
>
<path class="path" fill="white" stroke="black" stroke- 
 d="M3150 8544 c-208 -38 -355 -106 -479 -221 -40 -36 -75 -62 -80 -57
-4 5 -20 26 -35 48 -30 40 -93 75 -136 76 -41 0 -122 -44 -161 -86 -207 -230
-226 -724 -37 -939 53 -60 108 -88 175 -88 54 0 83 13 137 62 l29 26 -6 -75
c-20 -233 -161 -474 -261 -444 -37 11 -84 52 -132 117 -149 196 -182 227 -244
227 -61 0 -124 -53 -197 -167 -46 -73 -225 -423 -298 -583 -62 -135 -62 -136
-70 -128 -11 11 -57 268 -70 398 -34 315 -13 540 76 838 12 37 11 44 -1 52
-27 17 -54 -14 -110 -126 -65 -127 -111 -263 -144 -424 -70 -333 -90 -823 -41
-986 22 -76 48 -104 95 -104 48 0 86 30 142 114 23 33 42 62 43 64 1 1 18 -13
38 -33 39 -39 83 -47 110 -17 8 9 39 53 67 96 125 192 279 371 296 345 17 -29
17 -284 -1 -391 -34 -207 -88 -336 -244 -588 -174 -280 -289 -541 -337 -761
-14 -64 -19 -127 -19 -269 0 -171 2 -193 28 -293 54 -206 144 -388 284 -574
60 -81 77 -113 99 -183 57 -189 137 -405 254 -690 210 -508 252 -673 330
-1285 47 -366 77 -486 173 -685 91 -188 157 -268 198 -242 14 9 25 9 39 2 31
-17 50 -12 67 19 15 25 20 27 40 18 18 -8 27 -6 43 8 34 31 33 51 -9 148 -83
194 -90 278 -36 432 37 107 44 169 21 213 -19 37 -39 53 -121 97 -141 76 -140
74 -139 350 1 121 9 303 18 405 9 102 20 222 23 268 l6 82 -27 0 c-15 0 -29
-6 -31 -13 -11 -29 -46 -509 -52 -697 -9 -307 11 -367 145 -434 104 -52 132
-80 132 -127 0 -22 -12 -67 -26 -102 -36 -86 -52 -187 -42 -261 9 -68 41 -171
71 -231 19 -39 19 -40 0 -23 -40 36 -64 19 -56 -38 7 -46 -12 -50 -43 -9 -29
39 -48 44 -63 18 -10 -17 -12 -17 -27 2 -26 34 -132 257 -153 325 -33 99 -59
243 -92 500 -70 554 -120 761 -266 1120 -156 383 -186 459 -244 623 -32 92
-59 170 -59 174 0 3 35 -28 78 -68 265 -253 563 -473 1040 -769 l183 -113 63
-91 c472 -677 602 -958 831 -1791 36 -129 49 -155 79 -155 13 0 29 6 35 14 8
9 24 12 49 9 28 -4 44 0 65 17 15 12 27 28 27 36 0 9 11 14 30 14 17 0 39 9
51 21 27 27 23 73 -20 218 -41 139 -42 214 -1 319 45 118 54 169 40 222 -19
69 -64 105 -157 125 -43 9 -86 19 -96 23 -13 5 -36 51 -68 137 -110 289 -267
511 -462 658 -58 44 -245 163 -399 256 -15 9 -85 97 -155 196 -71 99 -190 266
-264 370 -273 382 -323 468 -322 560 1 64 18 116 141 415 86 210 113 320 113
470 0 152 -36 274 -120 403 -58 88 -118 143 -204 185 l-66 32 -25 82 c-44 144
-49 175 -43 271 14 262 212 597 411 699 60 31 143 35 192 10 103 -53 261 -257
461 -597 66 -111 75 -135 128 -320 68 -238 116 -377 157 -459 158 -315 449
-556 750 -621 75 -16 94 -13 101 17 7 24 -3 35 -151 151 -257 203 -474 482
-774 997 -82 141 -86 150 -141 350 -83 303 -133 452 -191 575 -63 133 -124
210 -197 250 -46 26 -64 30 -124 29 -90 -1 -161 -28 -275 -106 -424 -286 -879
-1098 -977 -1745 -22 -149 -22 -506 0 -663 19 -129 52 -304 63 -335 15 -43
-26 11 -90 118 -164 274 -225 555 -182 846 33 224 147 505 316 781 180 294
209 357 258 550 24 96 27 122 27 300 0 162 -3 201 -17 233 -13 29 -23 37 -43
37 -72 0 -150 -83 -340 -358 -73 -107 -78 -112 -95 -97 -10 9 -23 29 -30 45
-12 30 -7 43 161 395 62 131 189 366 229 426 45 65 103 119 129 119 30 0 67
-36 145 -139 130 -171 200 -222 283 -206 84 15 203 185 246 350 35 134 44 343
16 361 -17 10 -47 -7 -53 -30 -3 -12 -31 -46 -61 -76 -56 -52 -57 -52 -110
-48 -116 10 -196 133 -227 348 -35 249 68 546 214 621 64 33 113 10 166 -79
l19 -33 -38 -77 c-70 -141 -84 -292 -35 -364 18 -28 28 -33 68 -36 40 -3 48 0
71 28 15 17 31 47 37 68 17 61 12 199 -11 292 l-20 85 79 76 c61 59 100 87
173 123 173 85 368 115 529 81 121 -26 135 -25 135 5 0 38 -87 61 -245 65 -69
2 -136 1 -150 -1z m-543 -579 c6 -107 -9 -169 -42 -182 -64 -24 -62 177 2 302
l16 30 9 -25 c6 -14 12 -70 15 -125z m-1392 -987 c0 -195 4 -280 18 -368 21
-135 50 -277 70 -340 14 -44 13 -47 -16 -103 -34 -66 -102 -147 -123 -147 -7
0 -20 12 -28 28 -58 112 -45 624 24 963 17 85 51 219 54 219 1 0 1 -114 1
-252z m1622 -459 c126 -32 232 -221 353 -633 41 -139 46 -176 14 -114 -49 96
-206 311 -289 394 -107 107 -149 129 -248 122 -86 -5 -158 -42 -252 -130 -131
-122 -245 -322 -296 -517 -29 -114 -23 -268 15 -386 32 -101 32 -105 -2 -105
-45 0 -129 -29 -183 -61 -64 -40 -140 -126 -183 -208 -159 -305 -106 -641 119
-752 58 -28 71 -31 137 -27 93 5 169 39 243 109 164 155 176 350 44 728 -22
63 -37 116 -35 119 10 9 78 -42 127 -96 57 -64 120 -186 143 -278 9 -34 16
-103 16 -153 0 -158 -33 -275 -156 -562 -75 -177 -109 -301 -99 -367 13 -89
118 -256 464 -735 94 -131 171 -240 171 -242 0 -14 -465 291 -626 410 -197
145 -321 251 -475 405 l-146 145 -32 135 c-114 491 -115 903 -5 1295 36 129
145 396 225 558 252 502 591 882 844 943 65 16 59 16 112 3z m673 -1379 c204
-338 409 -592 625 -775 44 -38 82 -70 85 -72 3 -3 -9 -1 -25 3 -39 9 -232 107
-269 136 -128 101 -211 189 -281 298 -90 138 -129 233 -211 515 -10 32 8 8 76
-105z m-1290 -132 c92 -242 134 -450 112 -554 -24 -118 -86 -201 -192 -259
-48 -26 -65 -30 -130 -30 -65 1 -81 4 -122 30 -94 59 -151 186 -151 336 1 194
99 404 234 500 42 30 127 58 176 59 l41 0 32 -82z m1067 -2670 c146 -93 230
-157 306 -235 132 -134 244 -317 321 -525 61 -165 61 -165 189 -188 45 -8 79
-21 98 -37 25 -22 29 -31 29 -79 0 -36 -10 -80 -30 -132 -60 -158 -61 -195 -4
-396 19 -66 34 -126 34 -133 0 -19 -14 -16 -35 7 -11 12 -28 20 -39 18 -18 -3
-21 -11 -22 -51 0 -26 -4 -50 -8 -55 -10 -9 -36 27 -36 50 0 10 -7 21 -15 24
-22 9 -45 -14 -45 -44 0 -53 -19 -3 -70 183 -103 379 -211 676 -340 935 -93
188 -159 295 -423 692 -11 16 -16 28 -13 28 3 0 50 -28 103 -62z"/>
</g>
</svg>

将fill="white" 添加到 svg 以创建空白空间，只需将时间设置为 10 秒，以便您可以根据您的项目进行更改

【讨论】：

以上是关于使用 css 为我的 svg 文件设置动画时遇到问题的主要内容，如果未能解决你的问题，请参考以下文章

使用填充为 svg 设置动画

检测浏览器对 CSS 动画 SVG 的支持

SVG 动画在 Safari 13.1 (Mac OS & IOS) 中遇到问题

svg子元素上的CSS变换原点问题

如何使用 CSS3 无限地为我的图像设置动画

Firefox 上 CSS 动画前后的 SVG 模糊