向 SVG 笔画动画添加箭头

Posted 2023-03-06

【中文标题】向 SVG 笔画动画添加箭头

【英文标题】：Add arrow to SVG stroke animation

【发布时间】：2019-07-26 08:49:17

【问题描述】：

我正在尝试制作一个包含 SVG 徽标的动画箭头。我得到了笔画动画，但我不知道如何让箭头位于那条线的前面。

我想要实现的一个例子是https://***.com/questions/45545887/how-to-animate-this-svg-path-so-it-looks-like-the-arrow-is-being-drawn#=

.shape svg 
  width:100%;
  height: auto;

.outline 
  stroke-dasharray: 32050;
  animation: dash 2s linear forwards;
  stroke-linejoin: round;


@keyframes dash 
  from 
    stroke-dashoffset: 32050;
  
  to 
    stroke-dashoffset: 0;
  

<div class="shape">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1350 370" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,540.000000) scale(0.100000,-0.100000)" fill="#2e3464" stroke="none">
<path transform="translate(13150 7150) rotate(180 180 0)" class="outline" fill="none" stroke="#2e3464" stroke- d="M338 5250 c-61 -33 -103 -83 -116 -140 -17 -72 -17 -2995 -1 -3072 14 -61 46 -108 96 -138 l35 -20 6388 0 6389 0 35 20 c46 28 80 75 94 132 17 68 17 3005 0 3078 -13 58 -56 108 -118 140 -39 20 -67 20 -6402 20 -6294 -1 -6363 -1 -6400 -20z"/>
<path d="M730 4922 c-36 -2 -68 -6 -72 -10 -4 -4 -8 -227 -8 -495 l-1 -488 27 -32 c15 -18 41 -41 58 -52 29 -19 51 -20 499 -23 354 -3 472 -1 483 8 10 9 14 37 14 111 0 146 27 135 -346 143 -170 3 -329 9 -354 14 l-45 7 -6 65 c-4 36 -10 217 -14 403 -5 235 -11 340 -19 342 -20 6 -150 10 -216 7z"/>
<path d="M2446 4919 c-22 -5 -48 -17 -58 -25 -20 -19 -91 -136 -129 -215 -15 -31 -45 -85 -66 -120 -21 -35 -49 -86 -62 -114 -14 -27 -35 -66 -47 -86 -12 -20 -50 -90 -84 -155 -34 -65 -67 -124 -72 -131 -5 -7 -34 -61 -63 -120 -44 -87 -52 -110 -41 -121 18 -19 265 -29 305 -13 21 9 40 32 68 84 21 40 42 80 48 89 19 31 41 72 115 213 40 77 81 154 91 170 10 17 38 71 63 121 52 105 89 154 117 154 23 0 63 -61 138 -210 30 -58 57 -109 62 -114 16 -17 10 -55 -10 -66 -11 -6 -89 -10 -181 -10 -188 0 -205 -5 -195 -57 10 -56 64 -146 93 -158 9 -4 112 -10 229 -14 244 -8 226 -1 299 -118 54 -86 58 -87 237 -87 161 1 165 5 108 116 -23 46 -50 97 -61 113 -10 17 -31 55 -46 85 -15 30 -38 72 -51 93 -14 22 -44 76 -67 120 -24 45 -57 105 -73 132 -16 28 -32 58 -36 67 -3 10 -21 42 -40 70 -18 29 -43 73 -55 98 -32 66 -93 151 -123 173 -15 11 -46 23 -70 27 -73 14 -301 20 -343 9z"/>
<path d="M4267 4921 c-47 -10 -64 -33 -98 -131 -14 -41 -34 -95 -43 -120 -10 -25 -21 -61 -25 -80 -4 -19 -12 -44 -18 -55 -6 -11 -34 -90 -62 -175 -59 -178 -80 -224 -104 -228 -19 -4 -33 24 -112 218 -14 36 -34 85 -45 110 -10 25 -28 70 -40 100 -23 59 -26 67 -59 150 -13 30 -32 80 -42 111 -30 85 -42 93 -162 97 -175 7 -206 -12 -163 -97 14 -29 26 -60 26 -69 0 -9 7 -26 15 -36 8 -11 15 -30 15 -42 0 -13 4 -25 9 -28 4 -3 19 -34 31 -68 13 -35 29 -72 37 -83 7 -11 13 -27 13 -36 0 -10 7 -30 15 -46 8 -15 28 -64 45 -108 17 -44 37 -92 45 -107 8 -14 15 -35 15 -46 0 -12 4 -23 9 -27 5 -3 15 -22 22 -43 23 -71 81 -181 115 -216 25 -25 46 -37 81 -43 57 -9 287 -9 326 1 27 6 56 54 72 116 3 14 12 41 20 60 7 19 27 82 44 140 17 58 36 119 42 135 5 17 19 59 31 95 49 154 60 180 78 180 18 0 60 -67 60 -94 0 -30 159 -508 180 -544 11 -17 38 -44 61 -59 42 -27 46 -28 208 -31 193 -4 191 -5 230 103 13 33 26 64 31 70 4 5 18 38 30 73 13 34 27 65 31 68 5 3 9 13 9 24 0 10 14 45 30 78 17 34 30 65 30 71 0 6 7 27 16 48 9 21 22 52 29 68 7 17 26 64 43 105 16 41 50 125 75 185 74 180 72 174 55 191 -21 22 -75 27 -183 19 -114 -8 -122 -14 -161 -119 -14 -39 -39 -99 -55 -133 -16 -35 -29 -68 -29 -75 0 -15 -46 -134 -104 -271 -9 -21 -16 -43 -16 -50 0 -18 -70 -147 -79 -147 -21 0 -56 81 -116 270 -63 197 -77 237 -89 265 -7 17 -21 57 -31 90 -9 33 -20 65 -25 70 -4 6 -10 22 -14 37 -12 50 -45 62 -185 65 -69 1 -143 -2 -164 -6z"/>
<path d="M5873 4923 c-211 -3 -223 -4 -233 -24 -13 -23 -16 -1047 -3 -1060 24 -23 287 -28 310 -6 4 5 10 186 13 404 5 376 6 395 24 409 16 11 78 14 332 14 l313 0 27 -35 c23 -30 26 -45 27 -109 0 -81 -5 -93 -59 -126 -30 -19 -58 -22 -311 -31 -153 -6 -282 -14 -287 -19 -16 -16 65 -192 98 -216 16 -11 64 -14 211 -14 222 0 250 -4 290 -36 29 -23 30 -26 33 -129 4 -104 4 -106 30 -117 29 -12 235 -15 270 -4 29 10 40 72 31 182 -9 106 -33 163 -85 195 -32 19 -54 46 -54 66 0 5 16 17 36 28 79 43 113 130 114 293 0 160 -42 250 -142 302 -37 19 -66 23 -253 31 -115 4 -277 7 -360 6 -82 -1 -250 -3 -372 -4z"/>
<path d="M7465 4921 c-194 -6 -201 -7 -240 -32 -22 -15 -52 -41 -66 -58 -33 -39 -36 -76 -45 -471 -8 -355 -1 -412 59 -477 72 -79 33 -74 630 -67 324 4 537 11 545 17 8 6 12 40 12 103 0 79 -3 95 -17 102 -10 5 -198 12 -418 16 -220 3 -414 8 -432 12 -31 6 -32 8 -40 73 -13 108 -8 508 7 526 11 13 54 15 289 15 314 1 568 13 585 30 6 6 11 47 11 96 0 70 -3 88 -17 98 -32 24 -384 30 -863 17z"/>
<path d="M8565 4921 l-80 -6 -6 -235 c-3 -129 -3 -373 -1 -542 5 -301 6 -307 26 -312 38 -10 274 -7 281 4 4 6 6 163 5 350 -1 338 6 420 33 420 15 0 53 -40 112 -115 22 -27 44 -55 50 -61 5 -6 28 -35 50 -63 22 -29 54 -69 71 -89 16 -20 52 -66 80 -102 42 -55 109 -139 172 -215 10 -11 26 -32 38 -47 46 -61 81 -75 220 -87 129 -11 331 -6 356 10 10 7 13 110 14 531 1 313 -2 530 -8 541 -8 16 -23 17 -151 15 l-142 -3 -8 -365 c-4 -201 -9 -371 -12 -377 -9 -25 -44 -12 -76 28 -18 23 -48 59 -67 80 -20 21 -42 50 -51 63 -9 13 -43 57 -76 97 -33 40 -108 132 -166 205 -128 160 -186 225 -219 246 -46 30 -248 43 -445 29z"/>
<path d="M10546 4920 c-102 -6 -172 -14 -197 -24 -22 -9 -49 -16 -60 -16 -13 0 -46 -25 -83 -62 -92 -94 -99 -124 -104 -423 -4 -271 6 -345 60 -425 32 -48 107 -110 133 -110 9 0 30 -7 48 -16 27 -15 84 -17 452 -18 388 -1 427 1 504 19 75 18 90 25 132 66 39 38 49 55 54 93 4 26 4 51 -1 56 -5 5 -224 13 -486 17 l-476 8 -27 25 c-14 13 -35 43 -46 65 -19 38 -20 56 -17 221 3 201 7 211 73 247 39 21 54 22 496 28 250 3 461 9 467 13 17 10 15 61 -3 76 -8 7 -15 20 -15 29 -1 46 -122 111 -229 122 -124 13 -504 18 -675 9z"/>
<path d="M11978 4920 l-237 -8 -48 -29 c-28 -17 -57 -46 -70 -69 -22 -39 -23 -43 -23 -460 l0 -422 65 -61 66 -61 357 1 c196 0 438 4 536 8 205 9 206 9 206 97 0 72 -9 111 -29 120 -9 4 -196 10 -416 15 -225 4 -411 12 -426 17 -25 10 -26 12 -33 144 -9 154 -9 151 0 325 l6 132 42 5 c22 3 213 7 422 8 303 3 385 6 398 17 13 11 16 32 16 102 0 122 5 119 -188 119 -86 0 -213 2 -282 4 -69 2 -232 1 -362 -4z"/>
<path d="M7554 4471 c-64 -16 -66 -24 -24 -108 51 -102 22 -95 394 -91 218 2 329 7 336 14 8 8 1 32 -24 87 -26 58 -42 80 -63 89 -33 13 -571 22 -619 9z"/>
<path d="M12113 4473 c-152 -5 -155 -8 -113 -95 51 -110 24 -103 391 -103 207 0 322 4 328 10 20 20 -30 137 -72 168 -21 16 -48 19 -218 21 -107 2 -249 1 -316 -1z"/>
<path d="M950 3291 c-197 -7 -222 -16 -287 -105 -23 -30 -23 -32 -22 -375 0 -190 4 -379 8 -420 7 -70 9 -75 52 -116 l45 -43 295 -7 c162 -4 402 -3 534 1 l240 9 9 58 c12 81 -1 139 -34 148 -14 4 -201 7 -416 8 -365 1 -392 2 -407 19 -14 16 -17 44 -17 179 0 89 3 169 6 178 6 14 9 13 30 -6 13 -12 24 -26 24 -31 0 -5 16 -34 35 -64 l36 -56 307 4 c169 2 315 8 325 12 23 11 22 24 -12 87 -51 95 -46 94 -410 91 -225 -2 -317 1 -327 9 -18 15 -19 152 -1 167 7 6 177 15 417 22 250 7 410 15 417 22 17 14 18 168 0 191 -11 16 -44 18 -347 21 -184 2 -409 1 -500 -3z"/>
<path d="M2380 3290 c-259 -7 -312 -19 -382 -87 -78 -75 -94 -129 -107 -353 -8 -123 -6 -183 6 -290 14 -121 19 -140 48 -186 58 -91 138 -134 254 -135 42 0 103 -4 136 -9 33 -4 209 -3 390 1 334 9 428 20 480 56 27 18 40 17 85 -12 46 -29 78 -32 87 -7 4 9 20 36 35 59 41 60 46 96 17 121 -13 11 -37 31 -53 44 l-29 25 -2 224 c-3 360 -32 442 -185 515 l-65 31 -245 5 c-135 2 -346 1 -470 -2z m558 -259 c60 -31 71 -50 84 -142 14 -104 6 -159 -23 -159 -24 0 -120 52 -194 104 -74 53 -92 49 -146 -30 -24 -36 -48 -72 -54 -79 -15 -22 49 -81 135 -124 110 -54 131 -71 128 -95 -3 -20 -10 -21 -203 -27 -254 -9 -367 0 -399 30 -43 40 -58 120 -54 282 4 171 16 206 81 238 39 20 59 21 325 21 258 0 286 -2 320 -19z"/>
<path d="M3551 3292 c-29 -6 -36 -13 -44 -41 -4 -19 -7 -192 -4 -385 4 -362 5 -373 48 -471 26 -60 61 -95 124 -124 57 -27 77 -31 226 -40 112 -7 245 -7 419 0 248 10 257 11 326 40 126 53 169 118 185 287 12 118 7 701 -6 722 -10 15 -272 13 -282 -2 -4 -7 -10 -169 -13 -360 -5 -330 -6 -348 -26 -374 -11 -15 -33 -37 -48 -48 -26 -20 -40 -21 -287 -21 l-260 0 -45 47 -44 47 -1 98 c-2 198 -15 612 -19 616 -9 8 -214 15 -249 9z"/>
<path d="M5058 3293 c-36 -3 -61 -10 -70 -20 -10 -13 -13 -115 -13 -522 l0 -506 161 -3 162 -2 7 195 c4 107 6 336 3 510 -3 260 -6 317 -18 329 -16 15 -138 25 -232 19z"/>
<path d="M5582 3291 c-84 -4 -115 -10 -122 -21 -6 -9 -10 -221 -10 -521 l0 -506 143 -5 c78 -3 145 -3 150 -1 4 2 7 95 8 206 0 207 9 269 39 275 10 2 22 -12 33 -40 10 -24 31 -71 48 -106 l29 -63 313 3 c351 3 343 2 421 83 70 73 108 236 87 375 -22 140 -70 231 -146 271 -84 45 -123 49 -510 53 -203 2 -421 1 -483 -3z m756 -260 c44 -17 65 -62 66 -137 1 -51 -3 -67 -27 -101 l-28 -41 -167 -4 c-92 -2 -219 -2 -283 0 -141 5 -141 5 -147 143 -4 89 -2 99 19 129 l24 32 255 -4 c176 -3 265 -8 288 -17z"/>
<path d="M8259 3291 c-82 -5 -102 -10 -140 -34 -44 -28 -92 -91 -137 -177 -12 -25 -33 -63 -46 -85 -13 -22 -37 -66 -55 -97 -17 -32 -45 -84 -62 -115 -18 -32 -40 -73 -50 -91 -9 -18 -23 -39 -29 -47 -19 -22 -58 -18 -73 8 -53 85 -76 125 -129 222 -34 61 -81 149 -105 196 -109 210 -130 221 -411 217 l-197 -3 -3 -522 -2 -522 132 -3 c99 -2 135 0 145 10 7 8 11 18 8 23 -4 5 -1 158 5 341 9 270 14 336 26 348 13 13 17 12 34 -10 11 -14 27 -41 37 -60 10 -19 37 -67 61 -106 23 -39 42 -74 42 -77 0 -4 19 -39 43 -79 79 -134 137 -237 137 -247 0 -4 7 -14 15 -21 8 -7 15 -19 15 -27 0 -8 14 -32 30 -53 28 -35 36 -39 93 -45 34 -3 91 -3 126 2 67 8 79 18 111 92 6 13 19 36 29 50 11 15 30 47 43 71 13 25 43 77 66 117 23 39 42 74 42 78 0 3 14 26 30 50 17 24 30 46 30 49 0 4 20 40 45 80 25 41 45 77 45 81 0 17 55 75 71 75 18 0 19 -14 19 -364 0 -279 3 -366 13 -373 7 -6 70 -8 150 -5 l137 4 0 512 c0 281 -4 516 -8 522 -9 14 -204 23 -333 15z"/>
<path d="M11233 3292 c-31 -2 -57 -9 -65 -19 -10 -12 -14 -95 -18 -364 -3 -191 -8 -350 -12 -354 -11 -12 -44 13 -89 66 -96 114 -116 138 -164 199 -27 34 -55 71 -61 82 -6 10 -18 24 -26 31 -9 7 -44 48 -78 92 -212 271 -201 265 -488 265 -165 0 -212 -3 -221 -14 -8 -9 -13 -167 -18 -518 -6 -491 -6 -506 13 -514 10 -5 80 -8 155 -6 l136 3 7 350 c4 193 10 357 13 365 10 27 39 14 78 -37 54 -69 127 -159 145 -180 8 -9 74 -92 145 -185 72 -92 162 -201 202 -241 l71 -73 254 2 253 3 3 440 c3 420 -1 568 -16 591 -8 12 -138 22 -219 16z"/>
<path d="M11816 3292 c-163 -1 -254 -6 -263 -13 -21 -18 -18 -202 4 -220 13 -11 114 -15 542 -17 289 -2 564 1 611 5 l85 8 3 105 c1 58 -1 110 -5 116 -9 12 -545 21 -977 16z"/>
<path d="M8840 3279 c-32 -13 -77 -56 -98 -94 -15 -26 -17 -79 -20 -419 -3 -430 -4 -423 61 -491 l38 -40 532 4 c293 2 535 5 540 8 13 8 8 180 -5 191 -8 6 -165 11 -408 14 -394 5 -430 8 -451 40 -9 14 -2 539 8 548 22 19 163 30 404 31 145 1 302 4 349 7 l85 7 3 103 3 102 -508 -1 c-312 0 -518 -4 -533 -10z"/>
<path d="M12025 2979 c-4 -6 -7 -170 -8 -365 0 -294 2 -357 14 -369 19 -19 273 -34 283 -17 6 10 8 207 6 663 0 40 -17 52 -87 64 -21 4 -57 13 -81 21 -51 17 -118 18 -127 3z"/>
<path d="M9093 2854 c-17 -8 -16 -44 2 -68 8 -11 15 -27 15 -35 0 -9 11 -29 24 -46 l24 -30 300 -3 c311 -4 342 -1 342 37 0 21 -44 109 -66 131 -12 13 -64 15 -322 17 -169 1 -313 0 -319 -3z"/>
</g>
</svg>
</div>

【参考方案1】：

您不能使用 stroke-dash-array 为标记设置动画。 “draw/no-draw”数组的位置正在沿着路径滑动，但路径本身并没有移动，这意味着标记没有移动。

【参考方案2】：

您不能使用 stroke-dash-array 为标记设置动画。的位置 “draw/no-draw”数组正在沿着路径滑动，但是路径 本身不移动，这意味着标记不移动。 @迈克尔 穆兰尼

但是你可以用三角形替换标记，让它沿着动画的相同路径移动

为此，请使用命令animateMotion

<animateMotion
   id="an"
   dur="7s"
   repeatCount="1"
   rotate="auto-reverse"
   begin="0s"
   fill="freeze"
   restart="whenNotActive">
       <mpath xlink:href="#border"/>
</animateMotion>

id =" border " 是动画路径

持续时间动画stroke-dashoffset 和animateMotion 制作 相同的。然后看起来三角形与直线同时移动

.shape svg 
  width:100%;
  height: auto;

.outline 
  stroke-dasharray: 3253;
  animation: dash 7s linear forwards;
  stroke-linejoin: round;


@keyframes dash 
  from 
    stroke-dashoffset: 3253;
  
  to 
    stroke-dashoffset: 0;
  

</style>

<svg id="svg2" version="1.1" xmlns="http://www.w3.org/2000/svg"   xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1350 370" preserveAspectRatio="xMidYMid meet">

<g transform="translate(0 10) scale(0.9)">
 <path class="outline" id="border" d="m1317.2 348c6.1-3.3 10.3-8.3 11.6-14 1.7-7.2 1.7-299.5 0.1-307.2-1.4-6.1-4.6-10.8-9.6-13.8l-3.5-2H677 38.1l-3.5 2c-4.6 2.8-8 7.5-9.4 13.2-1.7 6.8-1.7 300.5 0 307.8 1.3 5.8 5.6 10.8 11.8 14 3.9 2 6.7 2 640.2 2 629.4-0.1 636.3-0.1 640-2z" style="fill:none;stroke-width:20;stroke:#2e3464" stroke-linecap="round"/>
  <path d="m73 45.8c-3.6 0.2-6.8 0.6-7.2 1C65.4 47.2 65 69.5 65 96.3l-0.1 48.8 2.7 3.2c1.5 1.8 4.1 4.1 5.8 5.2 2.9 1.9 5.1 2 49.9 2.3 35.4 0.3 47.2 0.1 48.3-0.8 1-0.9 1.4-3.7 1.4-11.1 0-14.6 2.7-13.5-34.6-14.3-17-0.3-32.9-0.9-35.4-1.4l-4.5-0.7-0.6-6.5c-0.4-3.6-1-21.7-1.4-40.3-0.5-23.5-1.1-34-1.9-34.2-2-0.6-15-1-21.6-0.7zM244.6 46.1" fill="#2e3464"/>
  <path d="m244.6 46.1c-2.2 0.5-4.8 1.7-5.8 2.5-2 1.9-9.1 13.6-12.9 21.5-1.5 3.1-4.5 8.5-6.6 12-2.1 3.5-4.9 8.6-6.2 11.4-1.4 2.7-3.5 6.6-4.7 8.6-1.2 2-5 9-8.4 15.5-3.4 6.5-6.7 12.4-7.2 13.1-0.5 0.7-3.4 6.1-6.3 12-4.4 8.7-5.2 11-4.1 12.1 1.8 1.9 26.5 2.9 30.5 1.3 2.1-0.9 4-3.2 6.8-8.4 2.1-4 4.2-8 4.8-8.9 1.9-3.1 4.1-7.2 11.5-21.3 4-7.7 8.1-15.4 9.1-17 1-1.7 3.8-7.1 6.3-12.1 5.2-10.5 8.9-15.4 11.7-15.4 2.3 0 6.3 6.1 13.8 21 3 5.8 5.7 10.9 6.2 11.4 1.6 1.7 1 5.5-1 6.6-1.1 0.6-8.9 1-18.1 1-18.8 0-20.5 0.5-19.5 5.7 1 5.6 6.4 14.6 9.3 15.8 0.9 0.4 11.2 1 22.9 1.4 24.4 0.8 22.6 0.1 29.9 11.8 5.4 8.6 5.8 8.7 23.7 8.7 16.1-0.1 16.5-0.5 10.8-11.6-2.3-4.6-5-9.7-6.1-11.3-1-1.7-3.1-5.5-4.6-8.5-1.5-3-3.8-7.2-5.1-9.3-1.4-2.2-4.4-7.6-6.7-12-2.4-4.5-5.7-10.5-7.3-13.2-1.6-2.8-3.2-5.8-3.6-6.7-0.3-1-2.1-4.2-4-7-1.8-2.9-4.3-7.3-5.5-9.8-3.2-6.6-9.3-15.1-12.3-17.3-1.5-1.1-4.6-2.3-7-2.7-7.3-1.4-30.1-2-34.3-0.9z" fill="#2e3464"/>
  <path d="m426.7 45.9c-4.7 1-6.4 3.3-9.8 13.1-1.4 4.1-3.4 9.5-4.3 12-1 2.5-2.1 6.1-2.5 8-0.4 1.9-1.2 4.4-1.8 5.5-0.6 1.1-3.4 9-6.2 17.5-5.9 17.8-8 22.4-10.4 22.8-1.9 0.4-3.3-2.4-11.2-21.8-1.4-3.6-3.4-8.5-4.5-11-1-2.5-2.8-7-4-10-2.3-5.9-2.6-6.7-5.9-15-1.3-3-3.2-8-4.2-11.1-3-8.5-4.2-9.3-16.2-9.7-17.5-0.7-20.6 1.2-16.3 9.7 1.4 2.9 2.6 6 2.6 6.9 0 0.9 0.7 2.6 1.5 3.6 0.8 1.1 1.5 3 1.5 4.2 0 1.3 0.4 2.5 0.9 2.8 0.4 0.3 1.9 3.4 3.1 6.8 1.3 3.5 2.9 7.2 3.7 8.3 0.7 1.1 1.3 2.7 1.3 3.6 0 1 0.7 3 1.5 4.6 0.8 1.5 2.8 6.4 4.5 10.8 1.7 4.4 3.7 9.2 4.5 10.7 0.8 1.4 1.5 3.5 1.5 4.6 0 1.2 0.4 2.3 0.9 2.7 0.5 0.3 1.5 2.2 2.2 4.3 2.3 7.1 8.1 18.1 11.5 21.6 2.5 2.5 4.6 3.7 8.1 4.3 5.7 0.9 28.7 0.9 32.6-0.1 2.7-0.6 5.6-5.4 7.2-11.6 0.3-1.4 1.2-4.1 2-6 0.7-1.9 2.7-8.2 4.4-14 1.7-5.8 3.6-11.9 4.2-13.5 0.5-1.7 1.9-5.9 3.1-9.5 4.9-15.4 6-18 7.8-18 1.8 0 6 6.7 6 9.4 0 3 15.9 50.8 18 54.4 1.1 1.7 3.8 4.4 6.1 5.9 4.2 2.7 4.6 2.8 20.8 3.1 19.3 0.4 19.1 0.5 23-10.3 1.3-3.3 2.6-6.4 3.1-7 0.4-0.5 1.8-3.8 3-7.3 1.3-3.4 2.7-6.5 3.1-6.8 0.5-0.3 0.9-1.3 0.9-2.4 0-1 1.4-4.5 3-7.8 1.7-3.4 3-6.5 3-7.1 0-0.6 0.7-2.7 1.6-4.8 0.9-2.1 2.2-5.2 2.9-6.8 0.7-1.7 2.6-6.4 4.3-10.5 1.6-4.1 5-12.5 7.5-18.5 7.4-18 7.2-17.4 5.5-19.1-2.1-2.2-7.5-2.7-18.3-1.9-11.4 0.8-12.2 1.4-16.1 11.9-1.4 3.9-3.9 9.9-5.5 13.3-1.6 3.5-2.9 6.8-2.9 7.5 0 1.5-4.6 13.4-10.4 27.1-0.9 2.1-1.6 4.3-1.6 5 0 1.8-7 14.7-7.9 14.7-2.1 0-5.6-8.1-11.6-27-6.3-19.7-7.7-23.7-8.9-26.5-0.7-1.7-2.1-5.7-3.1-9-0.9-3.3-2-6.5-2.5-7-0.4-0.6-1-2.2-1.4-3.7-1.2-5-4.5-6.2-18.5-6.5-6.9-0.1-14.3 0.2-16.4 0.6z" fill="#2e3464"/>
  <path d="M587.3 45.7C566.2 46 565 46.1 564 48.1c-1.3 2.3-1.6 104.7-0.3 106 2.4 2.3 28.7 2.8 31 0.6 0.4-0.5 1-18.6 1.3-40.4 0.5-37.6 0.6-39.5 2.4-40.9 1.6-1.1 7.8-1.4 33.2-1.4h31.3l2.7 3.5c2.3 3 2.6 4.5 2.7 10.9 0 8.1-0.5 9.3-5.9 12.6-3 1.9-5.8 2.2-31.1 3.1-15.3 0.6-28.2 1.4-28.7 1.9-1.6 1.6 6.5 19.2 9.8 21.6 1.6 1.1 6.4 1.4 21.1 1.4 22.2 0 25 0.4 29 3.6 2.9 2.3 3 2.6 3.3 12.9 0.4 10.4 0.4 10.6 3 11.7 2.9 1.2 23.5 1.5 27 0.4 2.9-1 4-7.2 3.1-18.2-0.9-10.6-3.3-16.3-8.5-19.5-3.2-1.9-5.4-4.6-5.4-6.6 0-0.5 1.6-1.7 3.6-2.8 7.9-4.3 11.3-13 11.4-29.3 0-16-4.2-25-14.2-30.2-3.7-1.9-6.6-2.3-25.3-3.1-11.5-0.4-27.7-0.7-36-0.6-8.2 0.1-25 0.3-37.2 0.4z" fill="#2e3464"/>
  <path d="m746.5 45.9c-19.4 0.6-20.1 0.7-24 3.2-2.2 1.5-5.2 4.1-6.6 5.8-3.3 3.9-3.6 7.6-4.5 47.1-0.8 35.5-0.1 41.2 5.9 47.7 7.2 7.9 3.3 7.4 63 6.7 32.4-0.4 53.7-1.1 54.5-1.7 0.8-0.6 1.2-4 1.2-10.3 0-7.9-0.3-9.5-1.7-10.2-1-0.5-19.8-1.2-41.8-1.6-22-0.3-41.4-0.8-43.2-1.2-3.1-0.6-3.2-0.8-4-7.3-1.3-10.8-0.8-50.8 0.7-52.6 1.1-1.3 5.4-1.5 28.9-1.5 31.4-0.1 56.8-1.3 58.5-3 0.6-0.6 1.1-4.7 1.1-9.6 0-7-0.3-8.8-1.7-9.8-3.2-2.4-38.4-3-86.3-1.7z" fill="#2e3464"/>
  <path d="m856.5 45.9-8 0.6-0.6 23.5c-0.3 12.9-0.3 37.3-0.1 54.2 0.5 30.1 0.6 30.7 2.6 31.2 3.8 1 27.4 0.7 28.1-0.4 0.4-0.6 0.6-16.3 0.5-35-0.1-33.8 0.6-42 3.3-42 1.5 0 5.3 4 11.2 11.5 2.2 2.7 4.4 5.5 5 6.1 0.5 0.6 2.8 3.5 5 6.3 2.2 2.9 5.4 6.9 7.1 8.9 1.6 2 5.2 6.6 8 10.2 4.2 5.5 10.9 13.9 17.2 21.5 1 1.1 2.6 3.2 3.8 4.7 4.6 6.1 8.1 7.5 22 8.7 12.9 1.1 33.1 0.6 35.6-1 1-0.7 1.3-11 1.4-53.1 0.1-31.3-0.2-53-0.8-54.1-0.8-1.6-2.3-1.7-15.1-1.5l-14.2 0.3-0.8 36.5c-0.4 20.1-0.9 37.1-1.2 37.7-0.9 2.5-4.4 1.2-7.6-2.8-1.8-2.3-4.8-5.9-6.7-8-2-2.1-4.2-5-5.1-6.3-0.9-1.3-4.3-5.7-7.6-9.7-3.3-4-10.8-13.2-16.6-20.5-12.8-16-18.6-22.5-21.9-24.6-4.6-3-24.8-4.3-44.5-2.9z" fill="#2e3464"/>
  <path d="m1054.6 46c-10.2 0.6-17.2 1.4-19.7 2.4-2.2 0.9-4.9 1.6-6 1.6-1.3 0-4.6 2.5-8.3 6.2-9.2 9.4-9.9 12.4-10.4 42.3-0.4 27.1 0.6 34.5 6 42.5 3.2 4.8 10.7 11 13.3 11 0.9 0 3 0.7 4.8 1.6 2.7 1.5 8.4 1.7 45.2 1.8 38.8 0.1 42.7-0.1 50.4-1.9 7.5-1.8 9-2.5 13.2-6.6 3.9-3.8 4.9-5.5 5.4-9.3 0.4-2.6 0.4-5.1-0.1-5.6-0.5-0.5-22.4-1.3-48.6-1.7l-47.6-0.8-2.7-2.5c-1.4-1.3-3.5-4.3-4.6-6.5-1.9-3.8-2-5.6-1.7-22.1 0.3-20.1 0.7-21.1 7.3-24.7 3.9-2.1 5.4-2.2 49.6-2.8 25-0.3 46.1-0.9 46.7-1.3 1.7-1 1.5-6.1-0.3-7.6-0.8-0.7-1.5-2-1.5-2.9-0.1-4.6-12.2-11.1-22.9-12.2-12.4-1.3-50.4-1.8-67.5-0.9z" fill="#2e3464"/>
  <path d="m1197.8 46-23.7 0.8-4.8 2.9c-2.8 1.7-5.7 4.6-7 6.9-2.2 3.9-2.3 4.3-2.3 46v42.2l6.5 6.1 6.6 6.1 35.7-0.1c19.6 0 43.8-0.4 53.6-0.8 20.5-0.9 20.6-0.9 20.6-9.7 0-7.2-0.9-11.1-2.9-12-0.9-0.4-19.6-1-41.6-1.5-22.5-0.4-41.1-1.2-42.6-1.7-2.5-1-2.6-1.2-3.3-14.4-0.9-15.4-0.9-15.1 0-32.5l0.6-13.2 4.2-0.5c2.2-0.3 21.3-0.7 42.2-0.8 30.3-0.3 38.5-0.6 39.8-1.7 1.3-1.1 1.6-3.2 1.6-10.2 0-12.2 0.5-11.9-18.8-11.9-8.6 0-21.3-0.2-28.2-0.4-6.9-0.2-23.2-0.1-36.2 0.4z" fill="#2e3464"/>
  <path d="m755.4 90.9c-6.4 1.6-6.6 2.4-2.4 10.8 5.1 10.2 2.2 9.5 39.4 9.1 21.8-0.2 32.9-0.7 33.6-1.4 0.8-0.8 0.1-3.2-2.4-8.7-2.6-5.8-4.2-8-6.3-8.9-3.3-1.3-57.1-2.2-61.9-0.9z" fill="#2e3464"/>
  <path d="m1211.3 90.7c-15.2 0.5-15.5 0.8-11.3 9.5 5.1 11 2.4 10.3 39.1 10.3 20.7 0 32.2-0.4 32.8-1 2-2-3-13.7-7.2-16.8-2.1-1.6-4.8-1.9-21.8-2.1-10.7-0.2-24.9-0.1-31.6 0.1z" fill="#2e3464"/>
  <path d="m95 208.9c-19.7 0.7-22.2 1.6-28.7 10.5-2.3 3-2.3 3.2-2.2 37.5 0 19 0.4 37.9 0.8 42 0.7 7 0.9 7.5 5.2 11.6l4.5 4.3 29.5 0.7c16.2 0.4 40.2 0.3 53.4-0.1l24-0.9 0.9-5.8c1.2-8.1-0.1-13.9-3.4-14.8-1.4-0.4-20.1-0.7-41.6-0.8-36.5-0.1-39.2-0.2-40.7-1.9-1.4-1.6-1.7-4.4-1.7-17.9 0-8.9 0.3-16.9 0.6-17.8 0.6-1.4 0.9-1.3 3 0.6 1.3 1.2 2.4 2.6 2.4 3.1 0 0.5 1.6 3.4 3.5 6.4l3.6 5.6 30.7-0.4c16.9-0.2 31.5-0.8 32.5-1.2 2.3-1.1 2.2-2.4-1.2-8.7-5.1-9.5-4.6-9.4-41-9.1-22.5 0.2-31.7-0.1-32.7-0.9-1.8-1.5-1.9-15.2-0.1-16.7 0.7-0.6 17.7-1.5 41.7-2.2 25-0.7 41-1.5 41.7-2.2 1.7-1.4 1.8-16.8 0-19.1-1.1-1.6-4.4-1.8-34.7-2.1-18.4-0.2-40.9-0.1-50 0.3z" fill="#2e3464"/>
  <path d="m238 209c-25.9 0.7-31.2 1.9-38.2 8.7-7.8 7.5-9.4 12.9-10.7 35.3-0.8 12.3-0.6 18.3 0.6 29 1.4 12.1 1.9 14 4.8 18.6 5.8 9.1 13.8 13.4 25.4 13.5 4.2 0 10.3 0.4 13.6 0.9 3.3 0.4 20.9 0.3 39-0.1 33.4-0.9 42.8-2 48-5.6 2.7-1.8 4-1.7 8.5 1.2 4.6 2.9 7.8 3.2 8.7 0.7 0.4-0.9 2-3.6 3.5-5.9 4.1-6 4.6-9.6 1.7-12.1-1.3-1.1-3.7-3.1-5.3-4.4l-2.9-2.5-0.2-22.4c-0.3-36-3.2-44.2-18.5-51.5l-6.5-3.1-24.5-0.5c-13.5-0.2-34.6-0.1-47 0.2zm55.8 25.9c6 3.1 7.1 5 8.4 14.2 1.4 10.4 0.6 15.9-2.3 15.9-2.4 0-12-5.2-19.4-10.4-7.4-5.3-9.2-4.9-14.6 3-2.4 3.6-4.8 7.2-5.4 7.9-1.5 2.2 4.9 8.1 13.5 12.4 11 5.4 13.1 7.1 12.8 9.5-0.3 2-1 2.1-20.3 2.7-25.4 0.9-36.7 0-39.9-3-4.3-4-5.8-12-5.4-28.2 0.4-17.1 1.6-20.6 8.1-23.8 3.9-2 5.9-2.1 32.5-2.1 25.8 0 28.6 0.2 32 1.9z" fill="#2e3464"/>
  <path d="m355.1 208.8c-2.9 0.6-3.6 1.3-4.4 4.1-0.4 1.9-0.7 19.2-0.4 38.5 0.4 36.2 0.5 37.3 4.8 47.1 2.6 6 6.1 9.5 12.4 12.4 5.7 2.7 7.7 3.1 22.6 4 11.2 0.7 24.5 0.7 41.9 0 24.8-1 25.7-1.1 32.6-4 12.6-5.3 16.9-11.8 18.5-28.7 1.2-11.8 0.7-70.1-0.6-72.2-1-1.5-27.2-1.3-28.2 0.2-0.4 0.7-1 16.9-1.3 36-0.5 33-0.6 34.8-2.6 37.4-1.1 1.5-3.3 3.7-4.8 4.8-2.6 2-4 2.1-28.7 2.1h-26l-4.5-4.7-4.4-4.7-0.1-9.8c-0.2-19.8-1.5-61.2-1.9-61.6-0.9-0.8-21.4-1.5-24.9-0.9z" fill="#2e3464"/>
  <path d="m505.8 208.7c-3.6 0.3-6.1 1-7 2-1 1.3-1.3 11.5-1.3 52.2v50.6l16.1 0.3 16.2 0.2 0.7-19.5c0.4-10.7 0.6-33.6 0.3-51-0.3-26-0.6-31.7-1.8-32.9-1.6-1.5-13.8-2.5-23.2-1.9z" fill="#2e3464"/>
  <path d="m558.2 208.9c-8.4 0.4-11.5 1-12.2 2.1-0.6 0.9-1 22.1-1 52.1v50.6l14.3 0.5c7.8 0.3 14.5 0.3 15 0.1 0.4-0.2 0.7-9.5 0.8-20.6 0-20.7 0.9-26.9 3.9-27.5 1-0.2 2.2 1.2 3.3 4 1 2.4 3.1 7.1 4.8 10.6l2.9 6.3 31.3-0.3c35.1-0.3 34.3-0.2 42.1-8.3 7-7.3 10.8-23.6 8.7-37.5-2.2-14-7-23.1-14.6-27.1-8.4-4.5-12.3-4.9-51-5.3-20.3-0.2-42.1-0.1-48.3 0.3zm75.6 26c4.4 1.7 6.5 6.2 6.6 13.7 0.1 5.1-0.3 6.7-2.7 10.1l-2.8 4.1-16.7 0.4c-9.2 0.2-21.9 0.2-28.3 0-14.1-0.5-14.1-0.5-14.7-14.3-0.4-8.9-0.2-9.9 1.9-12.9l2.4-3.2 25.5 0.4c17.6 0.3 26.5 0.8 28.8 1.7z" fill="#2e3464"/>
  <path d="m825.9 208.9c-8.2 0.5-10.2 1-14 3.4-4.4 2.8-9.2 9.1-13.7 17.7-1.2 2.5-3.3 6.3-4.6 8.5-1.3 2.2-3.7 6.6-5.5 9.7-1.7 3.2-4.5 8.4-6.2 11.5-1.8 3.2-4 7.3-5 9.1-0.9 1.8-2.3 3.9-2.9 4.7-1.9 2.2-5.8 1.8-7.3-0.8-5.3-8.5-7.6-12.5-12.9-22.2-3.4-6.1-8.1-14.9-10.5-19.6-10.9-21-13-22.1-41.1-21.7l-19.7 0.3-0.3 52.2-0.2 52.2 13.2 0.3c9.9 0.2 13.5 0 14.5-1 0.7-0.8 1.1-1.8 0.8-2.3-0.4-0.5-0.1-15.8 0.5-34.1 0.9-27 1.4-33.6 2.6-34.8 1.3-1.3 1.7-1.2 3.4 1 1.1 1.4 2.7 4.1 3.7 6 1 1.9 3.7 6.7 6.1 10.6 2.3 3.9 4.2 7.4 4.2 7.7 0 0.4 1.9 3.9 4.3 7.9 7.9 13.4 13.7 23.7 13.7 24.7 0 0.4 0.7 1.4 1.5 2.1 0.8 0.7 1.5 1.9 1.5 2.7 0 0.8 1.4 3.2 3 5.3 2.8 3.5 3.6 3.9 9.3 4.5 3.4 0.3 9.1 0.3 12.6-0.2 6.7-0.8 7.9-1.8 11.1-9.2 0.6-1.3 1.9-3.6 2.9-5 1.1-1.5 3-4.7 4.3-7.1 1.3-2.5 4.3-7.7 6.6-11.7 2.3-3.9 4.2-7.4 4.2-7.8 0-0.3 1.4-2.6 3-5 1.7-2.4 3-4.6 3-4.9 0-0.4 2-4 4.5-8 2.5-4.1 4.5-7.7 4.5-8.1 0-1.7 5.5-7.5 7.1-7.5 1.8 0 1.9 1.4 1.9 36.4 0 27.9 0.3 36.6 1.3 37.3 0.7 0.6 7 0.8 15 0.5l13.7-0.4v-51.2c0-28.1-0.4-51.6-0.8-52.2-0.9-1.4-20.4-2.3-33.3-1.5z" fill="#2e3464"/>
  <path d="m1123.3 208.8c-3.1 0.2-5.7 0.9-6.5 1.9-1 1.2-1.4 9.5-1.8 36.4-0.3 19.1-0.8 35-1.2 35.4-1.1 1.2-4.4-1.3-8.9-6.6-9.6-11.4-11.6-13.8-16.4-19.9-2.7-3.4-5.5-7.1-6.1-8.2-0.6-1-1.8-2.4-2.6-3.1-0.9-0.7-4.4-4.8-7.8-9.2-21.2-27.1-20.1-26.5-48.8-26.5-16.5 0-21.2 0.3-22.1 1.4-0.8 0.9-1.3 16.7-1.8 51.8-0.6 49.1-0.6 50.6 1.3 51.4 1 0.5 8 0.8 15.5 0.6l13.6-0.3 0.7-35c0.4-19.3 1-35.7 1.3-36.5 1-2.7 3.9-1.4 7.8 3.7 5.4 6.9 12.7 15.9 14.5 18 0.8 0.9 7.4 9.2 14.5 18.5 7.2 9.2 16.2 20.1 20.2 24.1l7.1 7.3 25.4-0.2 25.3-0.3 0.3-44c0.3-42-0.1-56.8-1.6-59.1-0.8-1.2-13.8-2.2-21.9-1.6z" fill="#2e3464"/>
  <path d="m1181.6 208.8c-16.3 0.1-25.4 0.6-26.3 1.3-2.1 1.8-1.8 20.2 0.4 22 1.3 1.1 11.4 1.5 54.2 1.7 28.9 0.2 56.4-0.1 61.1-0.5l8.5-0.8 0.3-10.5c0.1-5.8-0.1-11-0.5-11.6-0.9-1.2-54.5-2.1-97.7-1.6z" fill="#2e3464"/>
  <path d="m884 210.1c-3.2 1.3-7.7 5.6-9.8 9.4-1.5 2.6-1.7 7.9-2 41.9-0.3 43-0.4 42.3 6.1 49.1l3.8 4 53.2-0.4c29.3-0.2 53.5-0.5 54-0.8 1.3-0.8 0.8-18-0.5-19.1-0.8-0.6-16.5-1.1-40.8-1.4-39.4-0.5-43-0.8-45.1-4-0.9-1.4-0.2-53.9 0.8-54.8 2.2-1.9 16.3-3 40.4-3.1 14.5-0.1 30.2-0.4 34.9-0.7l8.5-0.7 0.3-10.3 0.3-10.2-50.8 0.1c-31.2 0-51.8 0.4-53.3 1z" fill="#2e3464"/>
  <path d="m1202.5 240.1c-0.4 0.6-0.7 17-0.8 36.5 0 29.4 0.2 35.7 1.4 36.9 1.9 1.9 27.3 3.4 28.3 1.7 0.6-1 0.8-20.7 0.6-66.3 0-4-1.7-5.2-8.7-6.4-2.1-0.4-5.7-1.3-8.1-2.1-5.1-1.7-11.8-1.8-12.7-0.3z" fill="#2e3464"/>
  <path d="m909.3 252.6c-1.7 0.8-1.6 4.4 0.2 6.8 0.8 1.1 1.5 2.7 1.5 3.5 0 0.9 1.1 2.9 2.4 4.6l2.4 3 30 0.3c31.1 0.4 34.2 0.1 34.2-3.7 0-2.1-4.4-10.9-6.6-13.1-1.2-1.3-6.4-1.5-32.2-1.7-16.9-0.1-31.3 0-31.9 0.3z" fill="#2e3464"/>
         <polyline transform="translate(7 -25) rotate(90)" points="0,0 25,43.3 50,0" fill="#4B55A3" >
 <animateMotion
   id="an"
   dur="7s"
   repeatCount="1"
   rotate="auto-reverse"
   begin="0s"
   fill="freeze"
   restart="whenNotActive">
       <mpath xlink:href="#border"/>
</animateMotion> 
    <set attributeName="fill-opacity" to="0" begin="an.end"  />  
</polyline>	
</g>
  </svg>

更新

cmets中的问题

是否可以让箭头停留在动画的末尾， 而不是关闭盒子，在底部留出一个空间 骑在盒子的一侧并保持箭头在右下角可见 角落？ ——查理·韦德尔

要在动画结束后保留​​箭头需要删除

<set attributeName="fill-opacity" to="0" begin="an.end" />

要遏制没有到达右上角的按钮必须减小： stroke-dasharray: 3163;stroke-dasharray: 3163;

箭头相对于直线的位置可调

<polyline transform="translate(80 -25) rotate(90)"

您仍然可以使用三角形标记 I 的长度 加长为80

points="0,0 25,80 50,0"

.shape svg 
  width:100%;
  height: auto;

.outline 
  stroke-dasharray: 3163;
  animation: dash 7s linear forwards;
  stroke-linejoin: round;


@keyframes dash 
  from 
    stroke-dashoffset: 3163;
  
  to 
    stroke-dashoffset: 0;
  

<svg id="svg2" version="1.1" xmlns="http://www.w3.org/2000/svg"   xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1350 370" preserveAspectRatio="xMidYMid meet">

<g transform="translate(0 10) scale(0.9)">
 <path class="outline" id="border" d="m1317.2 348c6.1-3.3 10.3-8.3 11.6-14 1.7-7.2 1.7-299.5 0.1-307.2-1.4-6.1-4.6-10.8-9.6-13.8l-3.5-2H677 38.1l-3.5 2c-4.6 2.8-8 7.5-9.4 13.2-1.7 6.8-1.7 300.5 0 307.8 1.3 5.8 5.6 10.8 11.8 14 3.9 2 6.7 2 640.2 2 629.4-0.1 636.3-0.1 640-2z" style="fill:none;stroke-width:20;stroke:#2e3464" stroke-linecap="round"/>
  <path d="m73 45.8c-3.6 0.2-6.8 0.6-7.2 1C65.4 47.2 65 69.5 65 96.3l-0.1 48.8 2.7 3.2c1.5 1.8 4.1 4.1 5.8 5.2 2.9 1.9 5.1 2 49.9 2.3 35.4 0.3 47.2 0.1 48.3-0.8 1-0.9 1.4-3.7 1.4-11.1 0-14.6 2.7-13.5-34.6-14.3-17-0.3-32.9-0.9-35.4-1.4l-4.5-0.7-0.6-6.5c-0.4-3.6-1-21.7-1.4-40.3-0.5-23.5-1.1-34-1.9-34.2-2-0.6-15-1-21.6-0.7zM244.6 46.1" fill="#2e3464"/>
  <path d="m244.6 46.1c-2.2 0.5-4.8 1.7-5.8 2.5-2 1.9-9.1 13.6-12.9 21.5-1.5 3.1-4.5 8.5-6.6 12-2.1 3.5-4.9 8.6-6.2 11.4-1.4 2.7-3.5 6.6-4.7 8.6-1.2 2-5 9-8.4 15.5-3.4 6.5-6.7 12.4-7.2 13.1-0.5 0.7-3.4 6.1-6.3 12-4.4 8.7-5.2 11-4.1 12.1 1.8 1.9 26.5 2.9 30.5 1.3 2.1-0.9 4-3.2 6.8-8.4 2.1-4 4.2-8 4.8-8.9 1.9-3.1 4.1-7.2 11.5-21.3 4-7.7 8.1-15.4 9.1-17 1-1.7 3.8-7.1 6.3-12.1 5.2-10.5 8.9-15.4 11.7-15.4 2.3 0 6.3 6.1 13.8 21 3 5.8 5.7 10.9 6.2 11.4 1.6 1.7 1 5.5-1 6.6-1.1 0.6-8.9 1-18.1 1-18.8 0-20.5 0.5-19.5 5.7 1 5.6 6.4 14.6 9.3 15.8 0.9 0.4 11.2 1 22.9 1.4 24.4 0.8 22.6 0.1 29.9 11.8 5.4 8.6 5.8 8.7 23.7 8.7 16.1-0.1 16.5-0.5 10.8-11.6-2.3-4.6-5-9.7-6.1-11.3-1-1.7-3.1-5.5-4.6-8.5-1.5-3-3.8-7.2-5.1-9.3-1.4-2.2-4.4-7.6-6.7-12-2.4-4.5-5.7-10.5-7.3-13.2-1.6-2.8-3.2-5.8-3.6-6.7-0.3-1-2.1-4.2-4-7-1.8-2.9-4.3-7.3-5.5-9.8-3.2-6.6-9.3-15.1-12.3-17.3-1.5-1.1-4.6-2.3-7-2.7-7.3-1.4-30.1-2-34.3-0.9z" fill="#2e3464"/>
  <path d="m426.7 45.9c-4.7 1-6.4 3.3-9.8 13.1-1.4 4.1-3.4 9.5-4.3 12-1 2.5-2.1 6.1-2.5 8-0.4 1.9-1.2 4.4-1.8 5.5-0.6 1.1-3.4 9-6.2 17.5-5.9 17.8-8 22.4-10.4 22.8-1.9 0.4-3.3-2.4-11.2-21.8-1.4-3.6-3.4-8.5-4.5-11-1-2.5-2.8-7-4-10-2.3-5.9-2.6-6.7-5.9-15-1.3-3-3.2-8-4.2-11.1-3-8.5-4.2-9.3-16.2-9.7-17.5-0.7-20.6 1.2-16.3 9.7 1.4 2.9 2.6 6 2.6 6.9 0 0.9 0.7 2.6 1.5 3.6 0.8 1.1 1.5 3 1.5 4.2 0 1.3 0.4 2.5 0.9 2.8 0.4 0.3 1.9 3.4 3.1 6.8 1.3 3.5 2.9 7.2 3.7 8.3 0.7 1.1 1.3 2.7 1.3 3.6 0 1 0.7 3 1.5 4.6 0.8 1.5 2.8 6.4 4.5 10.8 1.7 4.4 3.7 9.2 4.5 10.7 0.8 1.4 1.5 3.5 1.5 4.6 0 1.2 0.4 2.3 0.9 2.7 0.5 0.3 1.5 2.2 2.2 4.3 2.3 7.1 8.1 18.1 11.5 21.6 2.5 2.5 4.6 3.7 8.1 4.3 5.7 0.9 28.7 0.9 32.6-0.1 2.7-0.6 5.6-5.4 7.2-11.6 0.3-1.4 1.2-4.1 2-6 0.7-1.9 2.7-8.2 4.4-14 1.7-5.8 3.6-11.9 4.2-13.5 0.5-1.7 1.9-5.9 3.1-9.5 4.9-15.4 6-18 7.8-18 1.8 0 6 6.7 6 9.4 0 3 15.9 50.8 18 54.4 1.1 1.7 3.8 4.4 6.1 5.9 4.2 2.7 4.6 2.8 20.8 3.1 19.3 0.4 19.1 0.5 23-10.3 1.3-3.3 2.6-6.4 3.1-7 0.4-0.5 1.8-3.8 3-7.3 1.3-3.4 2.7-6.5 3.1-6.8 0.5-0.3 0.9-1.3 0.9-2.4 0-1 1.4-4.5 3-7.8 1.7-3.4 3-6.5 3-7.1 0-0.6 0.7-2.7 1.6-4.8 0.9-2.1 2.2-5.2 2.9-6.8 0.7-1.7 2.6-6.4 4.3-10.5 1.6-4.1 5-12.5 7.5-18.5 7.4-18 7.2-17.4 5.5-19.1-2.1-2.2-7.5-2.7-18.3-1.9-11.4 0.8-12.2 1.4-16.1 11.9-1.4 3.9-3.9 9.9-5.5 13.3-1.6 3.5-2.9 6.8-2.9 7.5 0 1.5-4.6 13.4-10.4 27.1-0.9 2.1-1.6 4.3-1.6 5 0 1.8-7 14.7-7.9 14.7-2.1 0-5.6-8.1-11.6-27-6.3-19.7-7.7-23.7-8.9-26.5-0.7-1.7-2.1-5.7-3.1-9-0.9-3.3-2-6.5-2.5-7-0.4-0.6-1-2.2-1.4-3.7-1.2-5-4.5-6.2-18.5-6.5-6.9-0.1-14.3 0.2-16.4 0.6z" fill="#2e3464"/>
  <path d="M587.3 45.7C566.2 46 565 46.1 564 48.1c-1.3 2.3-1.6 104.7-0.3 106 2.4 2.3 28.7 2.8 31 0.6 0.4-0.5 1-18.6 1.3-40.4 0.5-37.6 0.6-39.5 2.4-40.9 1.6-1.1 7.8-1.4 33.2-1.4h31.3l2.7 3.5c2.3 3 2.6 4.5 2.7 10.9 0 8.1-0.5 9.3-5.9 12.6-3 1.9-5.8 2.2-31.1 3.1-15.3 0.6-28.2 1.4-28.7 1.9-1.6 1.6 6.5 19.2 9.8 21.6 1.6 1.1 6.4 1.4 21.1 1.4 22.2 0 25 0.4 29 3.6 2.9 2.3 3 2.6 3.3 12.9 0.4 10.4 0.4 10.6 3 11.7 2.9 1.2 23.5 1.5 27 0.4 2.9-1 4-7.2 3.1-18.2-0.9-10.6-3.3-16.3-8.5-19.5-3.2-1.9-5.4-4.6-5.4-6.6 0-0.5 1.6-1.7 3.6-2.8 7.9-4.3 11.3-13 11.4-29.3 0-16-4.2-25-14.2-30.2-3.7-1.9-6.6-2.3-25.3-3.1-11.5-0.4-27.7-0.7-36-0.6-8.2 0.1-25 0.3-37.2 0.4z" fill="#2e3464"/>
  <path d="m746.5 45.9c-19.4 0.6-20.1 0.7-24 3.2-2.2 1.5-5.2 4.1-6.6 5.8-3.3 3.9-3.6 7.6-4.5 47.1-0.8 35.5-0.1 41.2 5.9 47.7 7.2 7.9 3.3 7.4 63 6.7 32.4-0.4 53.7-1.1 54.5-1.7 0.8-0.6 1.2-4 1.2-10.3 0-7.9-0.3-9.5-1.7-10.2-1-0.5-19.8-1.2-41.8-1.6-22-0.3-41.4-0.8-43.2-1.2-3.1-0.6-3.2-0.8-4-7.3-1.3-10.8-0.8-50.8 0.7-52.6 1.1-1.3 5.4-1.5 28.9-1.5 31.4-0.1 56.8-1.3 58.5-3 0.6-0.6 1.1-4.7 1.1-9.6 0-7-0.3-8.8-1.7-9.8-3.2-2.4-38.4-3-86.3-1.7z" fill="#2e3464"/>
  <path d="m856.5 45.9-8 0.6-0.6 23.5c-0.3 12.9-0.3 37.3-0.1 54.2 0.5 30.1 0.6 30.7 2.6 31.2 3.8 1 27.4 0.7 28.1-0.4 0.4-0.6 0.6-16.3 0.5-35-0.1-33.8 0.6-42 3.3-42 1.5 0 5.3 4 11.2 11.5 2.2 2.7 4.4 5.5 5 6.1 0.5 0.6 2.8 3.5 5 6.3 2.2 2.9 5.4 6.9 7.1 8.9 1.6 2 5.2 6.6 8 10.2 4.2 5.5 10.9 13.9 17.2 21.5 1 1.1 2.6 3.2 3.8 4.7 4.6 6.1 8.1 7.5 22 8.7 12.9 1.1 33.1 0.6 35.6-1 1-0.7 1.3-11 1.4-53.1 0.1-31.3-0.2-53-0.8-54.1-0.8-1.6-2.3-1.7-15.1-1.5l-14.2 0.3-0.8 36.5c-0.4 20.1-0.9 37.1-1.2 37.7-0.9 2.5-4.4 1.2-7.6-2.8-1.8-2.3-4.8-5.9-6.7-8-2-2.1-4.2-5-5.1-6.3-0.9-1.3-4.3-5.7-7.6-9.7-3.3-4-10.8-13.2-16.6-20.5-12.8-16-18.6-22.5-21.9-24.6-4.6-3-24.8-4.3-44.5-2.9z" fill="#2e3464"/>
  <path d="m1054.6 46c-10.2 0.6-17.2 1.4-19.7 2.4-2.2 0.9-4.9 1.6-6 1.6-1.3 0-4.6 2.5-8.3 6.2-9.2 9.4-9.9 12.4-10.4 42.3-0.4 27.1 0.6 34.5 6 42.5 3.2 4.8 10.7 11 13.3 11 0.9 0 3 0.7 4.8 1.6 2.7 1.5 8.4 1.7 45.2 1.8 38.8 0.1 42.7-0.1 50.4-1.9 7.5-1.8 9-2.5 13.2-6.6 3.9-3.8 4.9-5.5 5.4-9.3 0.4-2.6 0.4-5.1-0.1-5.6-0.5-0.5-22.4-1.3-48.6-1.7l-47.6-0.8-2.7-2.5c-1.4-1.3-3.5-4.3-4.6-6.5-1.9-3.8-2-5.6-1.7-22.1 0.3-20.1 0.7-21.1 7.3-24.7 3.9-2.1 5.4-2.2 49.6-2.8 25-0.3 46.1-0.9 46.7-1.3 1.7-1 1.5-6.1-0.3-7.6-0.8-0.7-1.5-2-1.5-2.9-0.1-4.6-12.2-11.1-22.9-12.2-12.4-1.3-50.4-1.8-67.5-0.9z" fill="#2e3464"/>
  <path d="m1197.8 46-23.7 0.8-4.8 2.9c-2.8 1.7-5.7 4.6-7 6.9-2.2 3.9-2.3 4.3-2.3 46v42.2l6.5 6.1 6.6 6.1 35.7-0.1c19.6 0 43.8-0.4 53.6-0.8 20.5-0.9 20.6-0.9 20.6-9.7 0-7.2-0.9-11.1-2.9-12-0.9-0.4-19.6-1-41.6-1.5-22.5-0.4-41.1-1.2-42.6-1.7-2.5-1-2.6-1.2-3.3-14.4-0.9-15.4-0.9-15.1 0-32.5l0.6-13.2 4.2-0.5c2.2-0.3 21.3-0.7 42.2-0.8 30.3-0.3 38.5-0.6 39.8-1.7 1.3-1.1 1.6-3.2 1.6-10.2 0-12.2 0.5-11.9-18.8-11.9-8.6 0-21.3-0.2-28.2-0.4-6.9-0.2-23.2-0.1-36.2 0.4z" fill="#2e3464"/>
  <path d="m755.4 90.9c-6.4 1.6-6.6 2.4-2.4 10.8 5.1 10.2 2.2 9.5 39.4 9.1 21.8-0.2 32.9-0.7 33.6-1.4 0.8-0.8 0.1-3.2-2.4-8.7-2.6-5.8-4.2-8-6.3-8.9-3.3-1.3-57.1-2.2-61.9-0.9z" fill="#2e3464"/>
  <path d="m1211.3 90.7c-15.2 0.5-15.5 0.8-11.3 9.5 5.1 11 2.4 10.3 39.1 10.3 20.7 0 32.2-0.4 32.8-1 2-2-3-13.7-7.2-16.8-2.1-1.6-4.8-1.9-21.8-2.1-10.7-0.2-24.9-0.1-31.6 0.1z" fill="#2e3464"/>
  <path d="m95 208.9c-19.7 0.7-22.2 1.6-28.7 10.5-2.3 3-2.3 3.2-2.2 37.5 0 19 0.4 37.9 0.8 42 0.7 7 0.9 7.5 5.2 11.6l4.5 4.3 29.5 0.7c16.2 0.4 40.2 0.3 53.4-0.1l24-0.9 0.9-5.8c1.2-8.1-0.1-13.9-3.4-14.8-1.4-0.4-20.1-0.7-41.6-0.8-36.5-0.1-39.2-0.2-40.7-1.9-1.4-1.6-1.7-4.4-1.7-17.9 0-8.9 0.3-16.9 0.6-17.8 0.6-1.4 0.9-1.3 3 0.6 1.3 1.2 2.4 2.6 2.4 3.1 0 0.5 1.6 3.4 3.5 6.4l3.6 5.6 30.7-0.4c16.9-0.2 31.5-0.8 32.5-1.2 2.3-1.1 2.2-2.4-1.2-8.7-5.1-9.5-4.6-9.4-41-9.1-22.5 0.2-31.7-0.1-32.7-0.9-1.8-1.5-1.9-15.2-0.1-16.7 0.7-0.6 17.7-1.5 41.7-2.2 25-0.7 41-1.5 41.7-2.2 1.7-1.4 1.8-16.8 0-19.1-1.1-1.6-4.4-1.8-34.7-2.1-18.4-0.2-40.9-0.1-50 0.3z" fill="#2e3464"/>
  <path d="m238 209c-25.9 0.7-31.2 1.9-38.2 8.7-7.8 7.5-9.4 12.9-10.7 35.3-0.8 12.3-0.6 18.3 0.6 29 1.4 12.1 1.9 14 4.8 18.6 5.8 9.1 13.8 13.4 25.4 13.5 4.2 0 10.3 0.4 13.6 0.9 3.3 0.4 20.9 0.3 39-0.1 33.4-0.9 42.8-2 48-5.6 2.7-1.8 4-1.7 8.5 1.2 4.6 2.9 7.8 3.2 8.7 0.7 0.4-0.9 2-3.6 3.5-5.9 4.1-6 4.6-9.6 1.7-12.1-1.3-1.1-3.7-3.1-5.3-4.4l-2.9-2.5-0.2-22.4c-0.3-36-3.2-44.2-18.5-51.5l-6.5-3.1-24.5-0.5c-13.5-0.2-34.6-0.1-47 0.2zm55.8 25.9c6 3.1 7.1 5 8.4 14.2 1.4 10.4 0.6 15.9-2.3 15.9-2.4 0-12-5.2-19.4-10.4-7.4-5.3-9.2-4.9-14.6 3-2.4 3.6-4.8 7.2-5.4 7.9-1.5 2.2 4.9 8.1 13.5 12.4 11 5.4 13.1 7.1 12.8 9.5-0.3 2-1 2.1-20.3 2.7-25.4 0.9-36.7 0-39.9-3-4.3-4-5.8-12-5.4-28.2 0.4-17.1 1.6-20.6 8.1-23.8 3.9-2 5.9-2.1 32.5-2.1 25.8 0 28.6 0.2 32 1.9z" fill="#2e3464"/>
  <path d="m355.1 208.8c-2.9 0.6-3.6 1.3-4.4 4.1-0.4 1.9-0.7 19.2-0.4 38.5 0.4 36.2 0.5 37.3 4.8 47.1 2.6 6 6.1 9.5 12.4 12.4 5.7 2.7 7.7 3.1 22.6 4 11.2 0.7 24.5 0.7 41.9 0 24.8-1 25.7-1.1 32.6-4 12.6-5.3 16.9-11.8 18.5-28.7 1.2-11.8 0.7-70.1-0.6-72.2-1-1.5-27.2-1.3-28.2 0.2-0.4 0.7-1 16.9-1.3 36-0.5 33-0.6 34.8-2.6 37.4-1.1 1.5-3.3 3.7-4.8 4.8-2.6 2-4 2.1-28.7 2.1h-26l-4.5-4.7-4.4-4.7-0.1-9.8c-0.2-19.8-1.5-61.2-1.9-61.6-0.9-0.8-21.4-1.5-24.9-0.9z" fill="#2e3464"/>
  <path d="m505.8 208.7c-3.6 0.3-6.1 1-7 2-1 1.3-1.3 11.5-1.3 52.2v50.6l16.1 0.3 16.2 0.2 0.7-19.5c0.4-10.7 0.6-33.6 0.3-51-0.3-26-0.6-31.7-1.8-32.9-1.6-1.5-13.8-2.5-23.2-1.9z" fill="#2e3464"/>
  <path d="m558.2 208.9c-8.4 0.4-11.5 1-12.2 2.1-0.6 0.9-1 22.1-1 52.1v50.6l14.3 0.5c7.8 0.3 14.5 0.3 15 0.1 0.4-0.2 0.7-9.5 0.8-20.6 0-20.7 0.9-26.9 3.9-27.5 1-0.2 2.2 1.2 3.3 4 1 2.4 3.1 7.1 4.8 10.6l2.9 6.3 31.3-0.3c35.1-0.3 34.3-0.2 42.1-8.3 7-7.3 10.8-23.6 8.7-37.5-2.2-14-7-23.1-14.6-27.1-8.4-4.5-12.3-4.9-51-5.3-20.3-0.2-42.1-0.1-48.3 0.3zm75.6 26c4.4 1.7 6.5 6.2 6.6 13.7 0.1 5.1-0.3 6.7-2.7 10.1l-2.8 4.1-16.7 0.4c-9.2 0.2-21.9 0.2-28.3 0-14.1-0.5-14.1-0.5-14.7-14.3-0.4-8.9-0.2-9.9 1.9-12.9l2.4-3.2 25.5 0.4c17.6 0.3 26.5 0.8 28.8 1.7z" fill="#2e3464"/>
  <path d="m825.9 208.9c-8.2 0.5-10.2 1-14 3.4-4.4 2.8-9.2 9.1-13.7 17.7-1.2 2.5-3.3 6.3-4.6 8.5-1.3 2.2-3.7 6.6-5.5 9.7-1.7 3.2-4.5 8.4-6.2 11.5-1.8 3.2-4 7.3-5 9.1-0.9 1.8-2.3 3.9-2.9 4.7-1.9 2.2-5.8 1.8-7.3-0.8-5.3-8.5-7.6-12.5-12.9-22.2-3.4-6.1-8.1-14.9-10.5-19.6-10.9-21-13-22.1-41.1-21.7l-19.7 0.3-0.3 52.2-0.2 52.2 13.2 0.3c9.9 0.2 13.5 0 14.5-1 0.7-0.8 1.1-1.8 0.8-2.3-0.4-0.5-0.1-15.8 0.5-34.1 0.9-27 1.4-33.6 2.6-34.8 1.3-1.3 1.7-1.2 3.4 1 1.1 1.4 2.7 4.1 3.7 6 1 1.9 3.7 6.7 6.1 10.6 2.3 3.9 4.2 7.4 4.2 7.7 0 0.4 1.9 3.9 4.3 7.9 7.9 13.4 13.7 23.7 13.7 24.7 0 0.4 0.7 1.4 1.5 2.1 0.8 0.7 1.5 1.9 1.5 2.7 0 0.8 1.4 3.2 3 5.3 2.8 3.5 3.6 3.9 9.3 4.5 3.4 0.3 9.1 0.3 12.6-0.2 6.7-0.8 7.9-1.8 11.1-9.2 0.6-1.3 1.9-3.6 2.9-5 1.1-1.5 3-4.7 4.3-7.1 1.3-2.5 4.3-7.7 6.6-11.7 2.3-3.9 4.2-7.4 4.2-7.8 0-0.3 1.4-2.6 3-5 1.7-2.4 3-4.6 3-4.9 0-0.4 2-4 4.5-8 2.5-4.1 4.5-7.7 4.5-8.1 0-1.7 5.5-7.5 7.1-7.5 1.8 0 1.9 1.4 1.9 36.4 0 27.9 0.3 36.6 1.3 37.3 0.7 0.6 7 0.8 15 0.5l13.7-0.4v-51.2c0-28.1-0.4-51.6-0.8-52.2-0.9-1.4-20.4-2.3-33.3-1.5z" fill="#2e3464"/>
  <path d="m1123.3 208.8c-3.1 0.2-5.7 0.9-6.5 1.9-1 1.2-1.4 9.5-1.8 36.4-0.3 19.1-0.8 35-1.2 35.4-1.1 1.2-4.4-1.3-8.9-6.6-9.6-11.4-11.6-13.8-16.4-19.9-2.7-3.4-5.5-7.1-6.1-8.2-0.6-1-1.8-2.4-2.6-3.1-0.9-0.7-4.4-4.8-7.8-9.2-21.2-27.1-20.1-26.5-48.8-26.5-16.5 0-21.2 0.3-22.1 1.4-0.8 0.9-1.3 16.7-1.8 51.8-0.6 49.1-0.6 50.6 1.3 51.4 1 0.5 8 0.8 15.5 0.6l13.6-0.3 0.7-35c0.4-19.3 1-35.7 1.3-36.5 1-2.7 3.9-1.4 7.8 3.7 5.4 6.9 12.7 15.9 14.5 18 0.8 0.9 7.4 9.2 14.5 18.5 7.2 9.2 16.2 20.1 20.2 24.1l7.1 7.3 25.4-0.2 25.3-0.3 0.3-44c0.3-42-0.1-56.8-1.6-59.1-0.8-1.2-13.8-2.2-21.9-1.6z" fill="#2e3464"/>
  <path d="m1181.6 208.8c-16.3 0.1-25.4 0.6-26.3 1.3-2.1 1.8-1.8 20.2 0.4 22 1.3 1.1 11.4 1.5 54.2 1.7 28.9 0.2 56.4-0.1 61.1-0.5l8.5-0.8 0.3-10.5c0.1-5.8-0.1-11-0.5-11.6-0.9-1.2-54.5-2.1-97.7-1.6z" fill="#2e3464"/>
  <path d="m884 210.1c-3.2 1.3-7.7 5.6-9.8 9.4-1.5 2.6-1.7 7.9-2 41.9-0.3 43-0.4 42.3 6.1 49.1l3.8 4 53.2-0.4c29.3-0.2 53.5-0.5 54-0.8 1.3-0.8 0.8-18-0.5-19.1-0.8-0.6-16.5-1.1-40.8-1.4-39.4-0.5-43-0.8-45.1-4-0.9-1.4-0.2-53.9 0.8-54.8 2.2-1.9 16.3-3 40.4-3.1 14.5-0.1 30.2-0.4 34.9-0.7l8.5-0.7 0.3-10.3 0.3-10.2-50.8 0.1c-31.2 0-51.8 0.4-53.3 1z" fill="#2e3464"/>
  <path d="m1202.5 240.1c-0.4 0.6-0.7 17-0.8 36.5 0 29.4 0.2 35.7 1.4 36.9 1.9 1.9 27.3 3.4 28.3 1.7 0.6-1 0.8-20.7 0.6-66.3 0-4-1.7-5.2-8.7-6.4-2.1-0.4-5.7-1.3-8.1-2.1-5.1-1.7-11.8-1.8-12.7-0.3z" fill="#2e3464"/>
  <path d="m909.3 252.6c-1.7 0.8-1.6 4.4 0.2 6.8 0.8 1.1 1.5 2.7 1.5 3.5 0 0.9 1.1 2.9 2.4 4.6l2.4 3 30 0.3c31.1 0.4 34.2 0.1 34.2-3.7 0-2.1-4.4-10.9-6.6-13.1-1.2-1.3-6.4-1.5-32.2-1.7-16.9-0.1-31.3 0-31.9 0.3z" fill="#2e3464"/>
         <polyline transform="translate(80 -25) rotate(90)" points="0,0 25,80 50,0" fill="#4B55A3" >
 <animateMotion
   id="an"
   dur="7s"
   repeatCount="1"
   rotate="auto-reverse"
   begin="0s"
   fill="freeze"
   restart="whenNotActive">
       <mpath xlink:href="#border"/>
</animateMotion> 
 <!--   <set attributeName="fill-opacity" to="0" begin="an.end"  />  -->
</polyline>	
</g>
  </svg>

【讨论】：

非常感谢@alexandr-tt！这正是我所需要的。只是一个简单的问题，是否可以让箭头停留在动画的末尾，而不是关闭盒子，在盒子的骑行侧底部留出空间并保持箭头在底部可见右上角？

@Charlie Wedel 我试着去做，但结果很难看，因为箭头开始在拐角处转动并变成一个角度我可以做出你想要的第二个选项吗？

我明白了。是否有可能在箭头到达拐角之前提前一点结束箭头？

@Charlie Wedel 我会做一个选项并描述如何调整