SVG文本路径动画：将路径视为圆形吗？

Question

I'm using an SVG textpath to animate a word around a closed path. 我正在使用SVG文本路径对封闭路径周围的单词进行动画处理。 How can I get the animation to treat the path as a circle, and have the text smoothly transition from the end of the path to the beginning? 如何获得动画，将路径视为圆形，并使文本从路径的结尾平滑过渡到起点？ Right now it finishes drawing the text (clipping the spillover), till the text disappears, then starts again at the beginning by popping the word back at the start. 现在，它完成了对文本的绘制（剪切溢出），直到文本消失，然后通过将单词从头开始弹出来再次从头开始。

<html><head>
<style type="text/css">
html {width: 100%; height: 100%;}
body {width: 100%; height: 100%; margin: 0; padding: 0;} 
svg {width: 100%; height: 100%;}  
text {fill: deepPink; font-size: 9em;}
</style>  
</head>
<body>   
<svg viewBox="0 0 800 600">
<path id="myPath" fill="none" stroke="#999999" stroke-width=45 stroke-miterlimit="10" stroke-linecap="round" d="M 305 99 L 313 104 L 319 108 L 323 114 L 328 116 L 333 122 L 338 125 L 358 125 L 367 114 L 369 108 L 381 111 L 407 111 L 417 104 L 421 104 L 433 106 L 441 105 L 452 108 L 481 99 L 499 103 L 539 92 L 546 94 L 562 102 L 567 102 L 579 102 L 589 105 L 604 119 L 623 150 L 637 167 L 648 185 L 651 194 L 653 209 L 664 235 L 670 253 L 671 279 L 677 295 L 678 305 L 676 318 L 678 329 L 685 348 L 687 370 L 686 380 L 677 398 L 674 402 L 666 410 L 651 439 L 643 451 L 629 465 L 601 476 L 596 477 L 578 473 L 570 473 L 553 478 L 538 476 L 520 483 L 497 493 L 477 496 L 471 497 L 463 500 L 439 517 L 433 519 L 427 522 L 410 522 L 394 523 L 382 521 L 377 520 L 367 518 L 356 511 L 343 505 L 329 503 L 320 503 L 300 505 L 267 514 L 234 523 L 212 526 L 205 526 L 193 522 L 178 515 L 160 512 L 155 509 L 138 483 L 135 476 L 135 468 L 141 455 L 142 446 L 139 434 L 138 419 L 138 374 L 136 360 L 135 356 L 140 347 L 145 331 L 146 324 L 141 305 L 141 294 L 142 283 L 161 242 L 166 232 L 175 225 L 179 212 L 193 204 L 195 199 L 199 185 L 199 178 L 207 171 L 216 168 L 226 165 L 230 158 L 228 146 L 228 140 L 233 127 L 237 115 L 243 110 L 259 111 L 267 110 L 280 108 L 292 102 L 297 102 Z"/>
<path             fill="none" stroke="#FFFF00" stroke-width= 3 stroke-miterlimit="10" stroke-linecap="round" d="M 305 99 L 313 104 L 319 108 L 323 114 L 328 116 L 333 122 L 338 125 L 358 125 L 367 114 L 369 108 L 381 111 L 407 111 L 417 104 L 421 104 L 433 106 L 441 105 L 452 108 L 481 99 L 499 103 L 539 92 L 546 94 L 562 102 L 567 102 L 579 102 L 589 105 L 604 119 L 623 150 L 637 167 L 648 185 L 651 194 L 653 209 L 664 235 L 670 253 L 671 279 L 677 295 L 678 305 L 676 318 L 678 329 L 685 348 L 687 370 L 686 380 L 677 398 L 674 402 L 666 410 L 651 439 L 643 451 L 629 465 L 601 476 L 596 477 L 578 473 L 570 473 L 553 478 L 538 476 L 520 483 L 497 493 L 477 496 L 471 497 L 463 500 L 439 517 L 433 519 L 427 522 L 410 522 L 394 523 L 382 521 L 377 520 L 367 518 L 356 511 L 343 505 L 329 503 L 320 503 L 300 505 L 267 514 L 234 523 L 212 526 L 205 526 L 193 522 L 178 515 L 160 512 L 155 509 L 138 483 L 135 476 L 135 468 L 141 455 L 142 446 L 139 434 L 138 419 L 138 374 L 136 360 L 135 356 L 140 347 L 145 331 L 146 324 L 141 305 L 141 294 L 142 283 L 161 242 L 166 232 L 175 225 L 179 212 L 193 204 L 195 199 L 199 185 L 199 178 L 207 171 L 216 168 L 226 165 L 230 158 L 228 146 L 228 140 L 233 127 L 237 115 L 243 110 L 259 111 L 267 110 L 280 108 L 292 102 L 297 102 Z"/>
<text>
<textpath xlink:href="#myPath">Autotopia 
<animate attributeName="startOffset" from="0%" to="100%" begin="0s" dur="10s" repeatCount="indefinite"/>
</textpath>
</text> 
</svg>
</body></html>

Code sample at mvjantzen.com/mobility/svganimatedtext.html mvjantzen.com/mobility/svganimatedtext.html上的代码示例

Answer 1

如何重复路径（使其绕过两次）然后从0到50％进行动画处理

Answer 2

You can use the snap svg library to achieve this: http://jsbin.com/gixomogiwo/1/edit And here is the code: 您可以使用snap svg库来实现此目的： http : //jsbin.com/gixomogiwo/1/edit这是代码：

var s = Snap(800,800); 

var path = "M 305 99 L 313 104 L 319 108 L 323 114 L 328 116 L 333 122 L 338 125 L 358 125 L 367 114 L 369 108 L 381 111 L 407 111 L 417 104 L 421 104 L 433 106 L 441 105 L 452 108 L 481 99 L 499 103 L 539 92 L 546 94 L 562 102 L 567 102 L 579 102 L 589 105 L 604 119 L 623 150 L 637 167 L 648 185 L 651 194 L 653 209 L 664 235 L 670 253 L 671 279 L 677 295 L 678 305 L 676 318 L 678 329 L 685 348 L 687 370 L 686 380 L 677 398 L 674 402 L 666 410 L 651 439 L 643 451 L 629 465 L 601 476 L 596 477 L 578 473 L 570 473 L 553 478 L 538 476 L 520 483 L 497 493 L 477 496 L 471 497 L 463 500 L 439 517 L 433 519 L 427 522 L 410 522 L 394 523 L 382 521 L 377 520 L 367 518 L 356 511 L 343 505 L 329 503 L 320 503 L 300 505 L 267 514 L 234 523 L 212 526 L 205 526 L 193 522 L 178 515 L 160 512 L 155 509 L 138 483 L 135 476 L 135 468 L 141 455 L 142 446 L 139 434 L 138 419 L 138 374 L 136 360 L 135 356 L 140 347 L 145 331 L 146 324 L 141 305 L 141 294 L 142 283 L 161 242 L 166 232 L 175 225 L 179 212 L 193 204 L 195 199 L 199 185 L 199 178 L 207 171 L 216 168 L 226 165 L 230 158 L 228 146 L 228 140 L 233 127 L 237 115 L 243 110 L 259 111 L 267 110 L 280 108 L 292 102 L 297 102 Z";



    setInterval(function(){ var text = s.text(50,50,'Autotopia')
        .attr({ 'textpath': path,'font-size' : '3em' })
        .textPath.animate({ 'startOffset': 3000 }, 5000 ); }, 5000);

SVG文本路径动画：将路径视为圆形吗？

问题描述

2 个解决方案

解决方案1
0 2015-01-02 07:21:20

解决方案2
-1 2015-01-02 12:43:59

SVG文本路径动画：将路径视为圆形吗？

问题描述

2 个解决方案

解决方案1 0 2015-01-02 07:21:20

解决方案2 -1 2015-01-02 12:43:59

解决方案1
0 2015-01-02 07:21:20

解决方案2
-1 2015-01-02 12:43:59