如何隨路徑旋轉 SVG 橢圓文本

Question

我正在嘗試使用橢圓路徑單獨旋轉 SVG 文本路徑，例如向前移動的文本我沒有嘗試過，但當前的 CSS 正在旋轉整個文本，我正在嘗試將每個文本向前移動到下一個

 svg { overflow: visible !important; padding:50px; } svg text{ -webkit-animation: loading 8s linear infinite; -moz-animation: loading 8s linear infinite; transform-origin: center } @-webkit-keyframes loading { 100%{ webkit-transform: rotate(360deg); transform: rotate(360deg); } @-moz-keyframes loading { 100%{ moz-transform: rotate(360deg); transform: rotate(360deg); } }

 <svg class="Oval_text_svg" width="400" fill="#C3A97E" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 511 746"> <defs> <pattern id="img1_ad77a587-4b9f-4d4a-9ef6-976c76e4841d" patternUnits="userSpaceOnUse" width="610" height="915"> <image href="https://via.placeholder.com/728x890.png" x="0" y="0"></image> </pattern> </defs> <path fill="url(#img1_ad77a587-4b9f-4d4a-9ef6-976c76e4841d)" id="Oval_text" d="M 255.5 745.5 C 246.8091888427734 745.5 238.0447235107422 744.8538818359375 229.4499053955078 743.5796508789062 C 220.9792785644531 742.3237915039062 212.4674530029297 740.42724609375 204.1510009765625 737.9429321289062 C 187.7884521484375 733.0548095703125 171.6926422119141 725.7604370117188 156.310546875 716.2623901367188 C 141.2030944824219 706.933837890625 126.6308212280273 695.3866577148438 112.9986343383789 681.9414672851562 C 99.49217987060547 668.620361328125 86.79063415527344 653.3209228515625 75.24672698974609 636.46826171875 C 63.70054626464844 619.6121826171875 53.21763610839844 601.0636596679688 44.08917999267578 581.3378295898438 C 34.87191009521484 561.4202880859375 26.95518112182617 540.1268920898438 20.5587272644043 518.0492553710938 C 14.04345417022705 495.5616455078125 9.039545059204102 472.0283508300781 5.685999870300293 448.1030883789062 C 2.244818210601807 423.552734375 0.5 398.2844543457031 0.5 373 C 0.5 347.7155456542969 2.244818210601807 322.447265625 5.685999870300293 297.8969116210938 C 9.039545059204102 273.9716491699219 14.04345417022705 250.4383697509766 20.5587272644043 227.9507293701172 C 26.95518112182617 205.8730926513672 34.87191009521484 184.5797271728516 44.08917999267578 164.6621856689453 C 53.21763610839844 144.9363708496094 63.70054626464844 126.3878173828125 75.24672698974609 109.5317306518555 C 86.79063415527344 92.67909240722656 99.49217987060547 77.379638671875 112.9986343383789 64.05854797363281 C 126.6308212280273 50.61336517333984 141.2030944824219 39.06618118286133 156.310546875 29.73763656616211 C 171.6926422119141 20.23954582214355 187.7884521484375 12.94518184661865 204.1510009765625 8.057090759277344 C 212.4674530029297 5.572727203369141 220.9792785644531 3.676181793212891 229.4499053955078 2.420363664627075 C 238.0447235107422 1.146090865135193 246.8091888427734 0.5 255.5 0.5 C 264.1908264160156 0.5 272.9552612304688 1.146090865135193 281.5500793457031 2.420363664627075 C 290.0207214355469 3.676181793212891 298.5325317382812 5.572727203369141 306.8489990234375 8.057090759277344 C 323.2115478515625 12.94518184661865 339.307373046875 20.23954582214355 354.689453125 29.73763656616211 C 369.7969055175781 39.06618118286133 384.3691711425781 50.61336517333984 398.0013732910156 64.05854797363281 C 411.5078125 77.379638671875 424.2093505859375 92.67909240722656 435.7532653808594 109.5317306518555 C 447.2994689941406 126.3878173828125 457.7823486328125 144.9363708496094 466.9108276367188 164.6621856689453 C 476.1280822753906 184.5797271728516 484.0448303222656 205.8730926513672 490.4412841796875 227.9507293701172 C 496.95654296875 250.4383697509766 501.96044921875 273.9716491699219 505.3139953613281 297.8969116210938 C 508.7551879882812 322.447265625 510.5 347.7155456542969 510.5 373 C 510.5 398.2844543457031 508.7551879882812 423.552734375 505.3139953613281 448.1030883789062 C 501.96044921875 472.0283508300781 496.95654296875 495.5616455078125 490.4412841796875 518.0492553710938 C 484.0448303222656 540.1268920898438 476.1280822753906 561.4202880859375 466.9108276367188 581.3378295898438 C 457.7823486328125 601.0636596679688 447.2994689941406 619.6121826171875 435.7532653808594 636.46826171875 C 424.2093505859375 653.3209228515625 411.5078125 668.620361328125 398.0013732910156 681.9414672851562 C 384.3691711425781 695.3866577148438 369.7969055175781 706.933837890625 354.689453125 716.2623901367188 C 339.307373046875 725.7604370117188 323.2115478515625 733.0548095703125 306.8489990234375 737.9429321289062 C 298.5325317382812 740.42724609375 290.0207214355469 742.3237915039062 281.5500793457031 743.5796508789062 C 272.9552612304688 744.8538818359375 264.1908264160156 745.5 255.5 745.5 Z" stroke="none"></path> <text dy="-10"> <textPath xlink:href="#Oval_text" class="svg_title">#Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text </textPath> </text> </svg>

Answer 1

如果您需要對包含文本的單獨元素進行動畫處理，如 gif 中所示：
css offset-path可能是一個選項。

實際的運動路徑由offset-path屬性定義

Css：橢圓運動路徑

  offset-path: path('M 50 37.5 C 50 58.2 38.8 75 25 75 C 11.2 75 0 58.2 0 37.5 C 0 16.8 11.2 0 25 0 C 38.8 0 50 16.8 50 37.5 Z');

 svg { overflow: visible; height: 90vmin; display: inline-block; } text { font-size: 10px; } .textLabel { offset-path: path('M 50 37.5 C 50 58.2 38.8 75 25 75 C 11.2 75 0 58.2 0 37.5 C 0 16.8 11.2 0 25 0 C 38.8 0 50 16.8 50 37.5 Z'); offset-distance: 0%; offset-rotate: 0deg; animation: rotate1 3s linear infinite forwards; } .textLabel2 { offset-distance: 50%; animation-name: rotate2; } @keyframes rotate1 { to { offset-distance: 100%; } } @keyframes rotate2 { to { offset-distance: 150%; } }

 <svg class="Oval_text_svg" width="400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 75"> <!-- optional: show motion path --> <path stroke="#ccc" stroke-width="1" fill="none" id="oval" d="M 50 37.5 C 50 58.2 38.8 75 25 75 C 11.2 75 0 58.2 0 37.5 C 0 16.8 11.2 0 25 0 C 38.8 0 50 16.8 50 37.5 Z" /> <g class="textLabel"> <circle cx="0" cy="0" r="10%" fill="red" /> <text fill="#fff" x="0" y="0" text-anchor="middle" dominant-baseline="central"> 01 </text> </g> <g class="textLabel textLabel2"> <circle cx="0" cy="0" r="10%" fill="red" /> <text fill="#fff" x="0" y="0" text-anchor="middle" dominant-baseline="central"> 02 </text> </g> </svg>

更改offset-distance值將允許您更改沿運動路徑的偏移量（例如，偏移距離：第二個元素的 50%）。