1

我有一个 geoJSON 时间序列数据,其中每个时间步长都告诉绕地球运行的物体的坐标(经度/纬度)。我想为路径设置动画。

我看过各种讨论如何使用 stroke-dasharray 为路径设置动画的帖子。但是,当我使用它时,我得到了一种奇怪的效果,动画从多个位置开始,而不是在起点以一个连续的动作顺序动画。

任何人都可以轻轻地提供有关为什么会发生这种情况的指示吗?我怎样才能将路径动画化为一个单一的动作?

html

<!DOCTYPE html>
<meta charset="utf-8">

<head>
  <script src="https://unpkg.com/d3-simple-slider"></script>
  <script src="https://unpkg.com/d3-interpolate-path/build/d3-interpolate-path.min.js"></script>
  <script src="https://d3js.org/d3-array.v1.min.js"></script>
  <script src="https://d3js.org/d3-geo.v1.min.js"></script>
  <script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
  <script src="https://d3js.org/d3.v5.min.js"></script>
</head>

<style>
  .graticule path {
    fill: none;
    stroke: #777;
    stroke-width: .5px;
    stroke-opacity: .5;
  }
</style>

<body>
  <div class="col-md-9 two-third-height" id="overview">
    <svg id="map-svg"></svg>
  </div>

  <script src="./script/json.js"></script>
  <script src="./script/simplified.js"></script>
</body>

</html>

简化的.js

const projection = d3.geoKavrayskiy7()
  .scale(90)
const path = d3.geoPath()
  .projection(projection);
const graticule = d3.geoGraticule();

const initMenu = () => {
  svg = d3.select("#map-svg")
    .attr("width", "100%")
    .attr("height", "100%")
    .attr("viewBox", `0 0 1000 400`)

  svg
    .append("g")
    .attr("class", "graticule")
    .append("path")
  svg
    .append("g")
    .attr("class", "path")
}

const update = (data) => {

  // Update graticule aka the lines
  d3.select('.graticule path')
    .datum(graticule())
    .attr('d', path);

  const path = d3.select('g.path')
    .selectAll("path")
    .data([data]);

  path
    .enter()
    .append('path')
    .attr('fill-opacity', 0)
    .attr('stroke', '#444')
    .attr('stroke-width', 1)
    .attr('d', path)
    .attr("stroke-dasharray", function(d) {
      var totalLength = this.getTotalLength();
      return totalLength + " " + totalLength;
    })
    .attr("stroke-dashoffset", function(d) {
      var totalLength = this.getTotalLength();
      return totalLength;
    })
    .transition()
    .duration(20000)
    .attr("stroke-dashoffset", 0);
}

initMenu();
update(json[0]);

json.js

json = [{
  "name": "sc",
  "type": "LineString",
  "coordinates": [
    [-0.3023488559914435, 0],
    [-0.6313075572663784, 3.045572480224131],
    [-0.9593515160881194, 6.0911017625774875],
    [-1.285567232631927, 9.136653220179895],
    [-1.6089819700377215, 12.18212659271454],
    [-1.9285483597217197, 15.227358338870197],
    [-2.2431472175202503, 18.272768618683312],
    [-2.551513482319764, 21.317719440616084],
    [-2.85224698162353, 24.36269929427686],
    [-3.14368085004699, 27.407165188123788],
    [-3.4239308821715926, 30.451481272537194],
    [-3.6907111584239205, 33.495305959892896],
    [-3.941379464148551, 36.539016366850184],
    [-4.172422956070858, 39.58181354225391],
    [-4.379830619329436, 42.62448671566546],
    [-4.558291693830182, 45.66587267131504],
    [-4.701079264073997, 48.706811742210334],
    [-4.799326855716433, 51.746386119338275],
    [-4.84120740746337, 54.7845306219787],
    [-4.810439822160183, 57.820530532491496],
    [-4.684088306253928, 60.85405260806056],
    [-4.428636056579008, 63.88412211301729],
    [-3.993128556874244, 66.90991842514617],
    [-3.2964444580362855, 69.92828303832937],
    [-2.200753633671055, 72.9364429532418],
    [-0.4530817429162483, 75.92703311403822],
    [2.4640911642823635, 78.88638342173184],
    [7.774651496329223, 81.7804476138991],
    [19.019483054187884, 84.5044522792283],
    [48.08359363142479, 86.6204717165928],
    [101.5101785557299, 86.64928135361241],
    [131.17437199499886, 84.55772545704087],
    [142.62221639587597, 81.8394876393732],
    [148.0066677694011, 78.94749261995416],
    [150.9574493722945, 75.98906080863927],
    [152.72286147962936, 72.99905783747069],
    [153.8286263651313, 69.99151257186979],
    [154.5329253747693, 66.97290654995587],
    [154.97274115930725, 63.94728442421541],
    [155.23101615500778, 60.917374657208406],
    [155.36001077853803, 57.88381709386116],
    [155.39170350791375, 54.84756357965154],
    [155.35154682625128, 51.809647285452634],
    [155.2540931889109, 48.77010204493089],
    [155.11229147532006, 45.72942166746874],
    [154.9341859349289, 42.68781035476639],
    [154.72753270985666, 39.645686375053394],
    [154.49742326597328, 36.602414329347766],
    [154.24643484051842, 33.55881786766415],
    [153.9803028215597, 30.514879257237375],
    [153.7003160973889, 27.470895212202706],
    [153.40921211744507, 24.426228599212244],
    [153.10864345467954, 21.38113006284952],
    [152.80009434906302, 18.336130973554763],
    [152.4859339173522, 15.290959512186065],
    [152.16641713877064, 12.245442319885344],
    [151.84280846970174, 9.200529809994217],
    [151.51680156871203, 6.154486447136019],
    [151.18886302235674, 3.109203683572571],
    [150.8597056420548, 0.06360406011682647],
    [150.53069608598875, -2.981985968659241],
    [150.20293048220165, -6.027767344541169],
    [149.87671201079146, -9.072847033457323],
    [149.5532198155647, -12.118316058508341],
    [149.23318449286052, -15.163839826582368],
    [148.91888275496177, -18.20886621528444],
    [148.61034261716125, -21.253879467475848],
    [148.3093708359102, -24.299052416521107],
    [148.01762238586502, -27.34334932131136],
    [147.73680459176447, -30.387777596809872],
    [147.4701813926463, -33.43168329226274],
    [147.21934229129272, -36.47551938107876],
    [146.98765159757244, -39.518755078741286],
    [146.7792606959376, -42.56073701632341],
    [146.6006932635956, -45.60252730225923],
    [146.45690802432512, -48.64304110935205],
    [146.35752507325785, -51.68281546803846],
    [146.31396863197187, -54.72066343451368],
    [146.34312108607483, -57.75690186814093],
    [146.46793629461212, -60.790622148867946],
    [146.72026451939539, -63.821065397516726],
    [147.1506073448508, -66.84697360166169],
    [147.84102418146534, -69.8653186885088],
    [148.92607269874438, -72.8739110175439],
    [150.6564218251841, -75.8648924669358],
    [153.54039318256343, -78.82511021717274],
    [158.7779455037142, -81.72120864013141],
    [169.82521006869496, -84.45103248240518],
    [-161.70227216394878, -86.59069197744235],
    [-108.30824009149775, -86.67717620230687],
    [-78.03417736568657, -84.6107729271818],
    [-66.37824735817671, -81.89850699432647],
    [-60.92016043248472, -79.00890948778398],
    [-57.93497084745334, -76.05148737852956],
    [-56.15099027966128, -73.06136222934416],
    [-55.033254912046566, -70.05424427086992],
    [-54.324138432262544, -67.03582295019964],
    [-53.87946068907352, -64.01105205000687],
    [-53.61757480857655, -60.98089194530891],
    [-53.48691562876568, -57.94734334254483],
    [-53.452359357394386, -54.91091553370058],
    [-53.491389432983226, -51.873425105934736],
    [-53.588135957543024, -48.833694927518174],
    [-53.72909218307837, -45.79293835590187],
    [-53.90605956723321, -42.7516197688688],
    [-54.11214944835567, -39.70916399593048],
    [-54.34251793057844, -36.66589460992499],
    [-54.59286638688032, -33.622603387245654],
    [-54.858268498952036, -30.578562545627495],
    [-55.13849880352984, -27.53434286991515],
    [-55.42934348201187, -24.489858992079043],
    [-55.72992530279169, -21.4450132151772],
    [-56.038066989423946, -18.399995108894878],
    [-56.35234448629926, -15.35441006027108],
    [-56.67158801118179, -12.309386248309846],
    [-56.994699683921176, -9.26376240130459],
    [-57.321025872367024, -6.2184607729619445],
    [-57.64917407184198, -3.172770367162938],
    [-57.9780455664196, -0.12721376198849713],
    [-58.30684670260434, 2.918373017307784],
    [-58.63495530170217, 5.963781465772357],
    [-58.96127516045728, 9.00957653986657],
    [-59.2851068405479, 12.054992368955574],
    [-59.60428760735822, 15.100282313197107],
    [-59.91921853462898, 18.14537271761683],
    [-60.22796442519372, 21.190425835901294],
    [-60.529182952622406, 24.235683205750735],
    [-60.8214379952935, 27.28005696216565],
    [-61.10156568466831, 30.3240157994044],
    [-61.36946463421851, 33.36840765690169],
    [-61.6208202514118, 36.4114920749573],
    [-61.85246839039053, 39.454827506048986],
    [-62.06092647481985, 42.497664473249735],
    [-62.24081828757504, 45.53901718913331],
    [-62.38562717179711, 48.57993502501733],
    [-62.48562628200702, 51.61942985873955],
    [-62.529878796777346, 54.6574037188813],
    [-62.5032344983647, 57.693646067251684],
    [-62.38121036114661, 60.72708185825088],
    [-62.132166589490915, 63.75789477106267],
    [-61.705559882449755, 66.78368382348542],
    [-61.02220444725587, 69.80234052710293],
    [-59.9467607788153, 72.81102697688793],
    [-58.233676685942264, 75.80261095239331],
    [-55.38249581120626, 78.76381466159191],
    [-50.21564843871536, 81.66133604622438],
    [-39.36265475629664, 84.39738186247222],
    [-11.470942506032458, 86.56000270923317],
    [41.85673262637384, 86.7040663507409],
    [72.74963431602002, 84.66354584276995],
    [84.61711886058968, 81.95761868322151],
    [90.15450279753725, 79.07035892785785],
    [93.17384732136419, 76.1135413075392],
    [94.97578821488642, 73.12447386140845],
    [96.10326123273235, 70.11733980251694],
    [96.81948264604588, 67.09928466103207],
    [97.26842674888695, 64.07403204115755],
    [97.53351479547334, 61.044241477505714],
    [97.66655741534429, 58.0108406825411],
    [97.7027466398964, 54.974423775410536],
    [97.6647082634673, 51.93678608993595],
    [97.56993213876866, 48.89723733385315],
    [97.42992051800792, 45.85669422046659],
    [97.25303834578213, 42.81493808876283],
    [97.04754843821604, 39.772305825012666],
    [96.81787920436238, 36.72978256662799],
    [96.56865203994364, 33.68595065285788],
    [96.30222682502657, 30.642047782867213],
    [96.02252396805952, 27.597689921265836],
    [95.73195898498668, 24.553343646603373],
    [95.43198144989842, 21.508494247008638],
    [95.12377381681718, 18.46347767516038],
    [94.80988992623702, 15.418022817352217],
    [94.49014564329246, 12.372693186329492],
    [94.1670845819406, 9.327664628645671],
    [93.84141255807707, 6.281883784921206],
    [93.5133678138644, 3.2364069310141117],
    [93.18433698436688, 0.19081923619362348],
    [92.85520461517311, -2.854741734089806],
    [92.52690095422616, -5.900436334863375],
    [92.20073473399049, -8.94577001515809],
    [91.87727949579234, -11.99112122084134],
    [91.55714066214031, -15.036853715486492],
    [91.24229050861507, -18.08203356603381],
    [90.93364689634446, -21.126719799986372],
    [90.63224328409513, -24.17154258932907],
    [90.34031156142265, -27.216350818248685],
    [90.05902268630052, -30.260918182810247],
    [89.79137041374649, -33.30452612627256],
    [89.5399799698115, -36.34809128104147],
    [89.3071097353302, -39.39107660525553],
    [89.09849662356268, -42.43407630214879],
    [88.91788813700578, -45.475203441229425],
    [88.77286904642385, -48.51603988233062],
    [88.67142041427596, -51.555542920298535],
    [88.62589903514905, -54.59407996566002],
    [88.65109750074846, -57.63034956575631],
    [88.77060122387597, -60.66383334155819],
    [89.01634663983842, -63.694467686817234],
    [89.43887655295669, -66.72010735522656],
    [90.11691694152663, -69.73956148194067],
    [91.1805419678935, -72.74801865661748],
    [92.87699634597318, -75.74028993143502],
    [95.69479285879467, -78.7020980378339],
    [100.79138840420595, -81.60232687490286],
    [111.4563430524232, -84.34351502658383],
    [138.77698841090034, -86.52836302988472],
    [-167.9938259926123, -86.72989581221717],
    [-136.47396174077417, -84.71606854869493],
    [-124.38871778773753, -82.01656940700674],
    [-118.77325731512362, -79.13143731875398],
    [-115.71856933420227, -76.17539121042284],
    [-113.89948453588043, -73.18676954506746],
    [-112.76044245429038, -70.18016173753287],
    [-112.03716159180503, -67.16213773194859],
    [-111.58346875248846, -64.13728360080384],
    [-111.31533321259575, -61.10737777586597],
    [-111.17892232227983, -58.07392260241931],
    [-111.14153653163957, -55.03798178098111],
    [-111.17776123317917, -52.000142030013826],
    [-111.27217335279913, -48.960830144065824],
    [-111.41125594882233, -45.91999928782098],
    [-111.58742109970476, -42.87860195703451],
    [-111.79259016854391, -39.835799612644436],
    [-112.0217594116837, -36.79326048776925],
    [-112.2706958927496, -33.749894914239405],
    [-112.53665938730339, -30.705676257618638],
    [-112.81576006257768, -27.661671963611145],
    [-113.10616160617204, -24.616981240158708],
    [-113.40659875017622, -21.57209195211385],
    [-113.71406998505464, -18.526984589930166],
    [-114.0280879599873, -15.481662491501663],
    [-114.34751044796403, -12.43666603075576],
    [-114.67052177676277, -9.390928745361176],
    [-114.99691621067053, -6.345280734968481],
    [-115.32462490802843, -3.2999890522691118],
    [-115.65372072166143, -0.25442861738026956],
    [-115.98236261024074, 2.7911754948716716],
    [-116.31047185393425, 5.836487893219857],
    [-116.63697735634761, 8.88203062664952],
    [-116.96087660679972, 11.927887707830141],
    [-117.28076509581702, 14.972856716975723],
    [-117.59573140029221, 18.018354476145287],
    [-117.90451289220098, 21.063301829772666],
    [-118.20637119744823, 24.108128080235996],
    [-118.49830548668751, 27.152888154480447],
    [-118.77964257265538, 30.197210836487177],
    [-119.04745316574838, 33.2410611705452],
    [-119.2995122492985, 36.2848990898796],
    [-119.53257847246591, 39.32796842941962],
    [-119.74185050309868, 42.37035885790301],
    [-119.92315630279982, 45.41182464457625],
    [-120.06929003947602, 48.45292053572346],
    [-120.17135819586969, 51.49210563834619],
    [-120.2192896985909, 54.53032570014871],
    [-120.1953722459573, 57.56707389668018],
    [-120.07836083667578, 60.60067362962539],
    [-119.83492631698675, 63.631387144880065],
    [-119.41624387762567, 66.6572670921226],
    [-118.74627409615765, 69.67629331087346],
    [-117.6908088275561, 72.6856155137359],
    [-116.01178970560844, 75.67821363040808],
    [-113.22547572930192, 78.64109184114778],
    [-108.19965058365133, 81.54262237615231],
    [-97.71795309878482, 84.28943622621254],
    [-70.95824109996634, 86.49594169009085],
    [-17.86095755954425, 86.75469758137673],
    [14.294398099506223, 84.7683142119176],
    [26.603041282798664, 82.07569555019927],
    [32.29767008412572, 79.19234307191958],
    [35.38813054471107, 76.238107838831],
    [37.2267745376307, 73.24972852626054],
    [38.37584636700151, 70.24300602317511],
    [39.106690377003204, 67.22510963882854],
    [39.56472853007683, 64.20029352472193],
    [39.836146560166654, 61.170626123939186],
    [39.97430218842225, 58.13756961162872],
    [40.013630003456015, 55.10160675203734],
    [39.978581606718876, 52.06349968809701],
    [39.885993267830585, 49.024428597524185],
    [39.74689409409978, 45.983738526247606],
    [39.572258851162424, 42.94203228137465],
    [39.36708844471829, 39.90009162765984],
    [39.13820672339272, 36.85684383439464],
    [38.889878561316515, 33.813385695673496],
    [38.624375221672494, 30.76912360579221],
    [38.34523240069312, 27.725153025300415],
    [38.05533341435303, 24.680647324351128],
    [37.75531669911636, 21.63552326556002],
    [37.44787692306938, 18.59042429525497],
    [37.13385191881863, 15.545245739519556],
    [36.814641124501215, 12.499964617051456],
    [36.49128132191953, 9.454867030033439],
    [36.165788663332656, 6.409297578298321],
    [35.83751745406171, 3.3635836711317473],
    [35.5085072407756, 0.3180320993586174],
    [35.17948666154323, -2.727574930326246],
    [34.85175195546459, -5.773162323600621],
    [34.52515903362366, -8.818802893479315],
    [34.20108023947484, -11.864008188612265],
    [33.8809848421932, -14.909275224580687],
    [33.566306284163005, -17.954485157482324],
    [33.25676488767936, -20.999503902843212],
    [32.95549637945566, -24.044835718803224],
    [32.6628833452963, -27.089263669914136],
    [32.38113106505414, -30.13366592300555],
    [32.11340585865883, -33.17782302426036],
    [31.860634938968854, -36.22103796561524],
    [31.6272110234296, -39.26441333729015],
    [31.417429449770488, -42.306609984484695],
    [31.235514657080003, -45.34825661605679],
    [31.08879867870489, -48.3888661129614],
    [30.984908382283006, -51.42863167260751],
    [30.93651469018958, -54.46727507766331],
    [30.959441795084956, -57.50325213773873],
    [31.07394937251371, -60.53761635008906],
    [31.314386903550574, -63.56769920974552],
    [31.72745241100606, -66.59401247151453],
    [32.39234915580023, -69.61362806349229],
    [33.43669842993303, -72.6226289537069],
    [35.09888401051565, -75.61590875470792],
    [37.8558259681781, -78.57968247151892],
    [42.81446765987951, -81.48295223133707],
    [53.114307608679894, -84.23516673810259],
    [79.32346632393069, -86.4625954352851],
    [132.2571924343151, -86.77845788281515],
    [165.05532348429196, -84.82039538758426],
    [177.59205449969542, -82.13437940997268],
    [-176.63209426493083, -79.2534860076738],
    [-173.50573572029785, -76.30010691022163],
    [-171.6480155085273, -73.3121932494118],
    [-170.48791145391164, -70.30584684395433],
    [-169.7503513953277, -67.2883067578315],
    [-169.28743995608363, -64.26371328651803],
    [-169.01275970002794, -61.23389755664451],
    [-168.87234264570546, -58.20057900131123],
    [-168.83096255562376, -55.16491426776261],
    [-168.86471961720557, -52.12704081273665],
    [-168.9565997309153, -49.087631797282256],
    [-169.0944123878255, -46.04692221011652],
    [-169.26879087961507, -43.005753055012306],
    [-169.47292468116729, -39.963303047527575],
    [-169.7011963343506, -36.92019562089875],
    [-169.94958589363728, -33.87693592391778],
    [-170.21453629863373, -30.833077335063166],
    [-170.49323288584853, -27.78853599399221],
    [-170.78334684345785, -24.744379806425812],
    [-171.0830611405299, -21.69891285645182],
    [-171.39054926149018, -18.654473807518546],
    [-171.7044019264896, -15.608920251381752],
    [-172.02342186318953, -12.563965721726223],
    [-172.34642613534308, -9.518174116349584],
    [-172.67232196515226, -6.472708464635084],
    [-173.00024590173066, -3.4272298027563255],
    [-173.32908964938662, -0.3816379122486284],
    [-173.65813368409204, 2.663949377432655],
    [-173.98631747120882, 5.709507139007023],
    [-174.31281811587468, 8.755001602480583],
    [-174.6366452084603, 11.80028669021492],
    [-174.95675920218503, 14.84592425587694],
    [-175.27202433426476, 17.89112996713632],
    [-175.58126651765457, 20.936333095759235],
    [-175.88301664686026, 23.98090442873926],
    [-176.17572359298694, 27.025720848792187],
    [-176.4575054244638, 30.070085193702567],
    [-176.72615514746184, 33.11412529331916],
    [-176.97895953422938, 36.157680644149046],
    [-177.2126858586605, 39.20071843490879],
    [-177.42328191496546, 42.24317413322983],
    [-177.60570798217393, 45.28463657743473],
    [-177.75343139856653, 48.32589794217247],
    [-177.85783401745326, 51.36529397081948],
    [-177.90756480975955, 54.4037935962267],
    [-177.88699450197228, 57.43988909360956],
    [-177.7742230758897, 60.473944486697334],
    [-177.5372444580213, 63.50487868252385],
    [-177.12798692060647, 66.53109777078521],
    [-176.47008784178468, 69.5506106397131],
    [-175.43499847431215, 72.55989116408526],
    [-173.78949439115374, 75.55339884340567],
    [-171.0637887331026, 78.51821154722859],
    [-166.17038085037882, 81.42349869460675]
  ]
}]

编辑: 视频:https ://imgur.com/a/1xY22OS

路径属性

d: path("M 479.589 250 L 479.142 245.216 L 478.697 240.432 L 478.258 235.648 L 477.826 230.864 L 477.405 226.081 L 476.996 221.297 L 476.603 216.514 L 476.228 211.731 L 475.875 206.949 L 475.547 202.167 L 475.247 197.386 L 474.981 192.605 L 474.752 187.825 L 474.566 183.046 L 474.43 178.268 L 474.351 173.492 L 474.338 168.717 L 474.404 163.945 L 474.563 159.176 L 474.835 154.411 L 475.248 149.651 L 475.844 144.898 L 476.683 140.157 L 477.867 135.432 L 479.579 130.734 L 482.182 126.086 L 486.526 121.54 L 495.06 117.261 L 516.14 113.937 L 556.238 113.892 L 583.737 117.177 L 599.575 121.447 L 610.933 125.99 L 620.084 130.637 L 627.87 135.333 L 634.684 140.058 L 640.744 144.799 L 646.18 149.552 L 651.085 154.311 L 655.526 159.076 L 659.549 163.846 L 663.197 168.618 L 666.499 173.392 L 669.48 178.168 L 672.163 182.946 L 674.565 187.725 L 676.703 192.505 L 678.588 197.286 L 680.234 202.067 L 681.649 206.849 L 682.844 211.631 L 683.825 216.415 L 684.601 221.198 L 685.176 225.981 L 685.557 230.765 L 685.748 235.548 L 685.754 240.333 L 685.578 245.116 L 685.222 249.9 L 684.69 254.684 L 683.984 259.468 L 683.106 264.252 L 682.057 269.035 L 680.837 273.819 L 679.448 278.602 L 677.889 283.386 L 676.16 288.169 L 674.261 292.951 L 672.19 297.733 L 669.947 302.514 L 667.529 307.296 L 664.933 312.076 L 662.158 316.854 L 659.202 321.632 L 656.06 326.408 L 652.731 331.183 L 649.211 335.955 L 645.501 340.724 L 641.602 345.49 L 637.52 350.25 L 633.269 355.003 L 628.885 359.744 L 624.435 364.47 L 620.067 369.168 L 616.115 373.818 L 613.433 378.367 L 613.278 380.559 L 614.635 382.655 L 618.846 384.461 M 341.154 384.461 L 358.368 386.016 L 398.716 386.152 L 418.364 382.906 L 424.414 378.646 L 426.165 374.107 L 426.289 369.461 L 425.678 364.765 L 424.702 360.041 L 423.53 355.3 L 422.259 350.548 L 420.939 345.789 L 419.6 341.023 L 418.265 336.254 L 416.946 331.483 L 415.651 326.708 L 414.388 321.931 L 413.161 317.154 L 411.974 312.375 L 410.829 307.595 L 409.729 302.814 L 408.677 298.033 L 407.673 293.251 L 406.72 288.469 L 405.82 283.686 L 404.973 278.903 L 404.182 274.119 L 403.45 269.336 L 402.776 264.551 L 402.163 259.768 L 401.614 254.984 L 401.13 250.2 L 400.714 245.416 L 400.367 240.632 L 400.094 235.848 L 399.896 231.064 L 399.778 226.281 L 399.741 221.497 L 399.79 216.714 L 399.93 211.931 L 400.163 207.149 L 400.498 202.367 L 400.937 197.585 L 401.488 192.805 L 402.159 188.025 L 402.957 183.245 L 403.893 178.467 L 404.977 173.691 L 406.225 168.916 L 407.653 164.144 L 409.28 159.375 L 411.136 154.61 L 413.255 149.849 L 415.686 145.096 L 418.501 140.355 L 421.813 135.629 L 425.809 130.93 L 430.851 126.278 L 437.75 121.727 L 448.755 117.429 L 471.365 114.032 L 511.391 113.806 L 537.391 117.011 L 550.776 121.261 L 559.585 125.797 L 566.3 130.441 L 571.804 135.136 L 576.493 139.86 L 580.575 144.601 L 584.177 149.353 L 587.377 154.112 L 590.234 158.877 L 592.791 163.646 L 595.077 168.418 L 597.119 173.192 L 598.938 177.968 L 600.549 182.746 L 601.968 187.526 L 603.206 192.305 L 604.274 197.086 L 605.181 201.868 L 605.934 206.65 L 606.542 211.432 L 607.01 216.215 L 607.343 220.998 L 607.547 225.781 L 607.625 230.565 L 607.583 235.348 L 607.424 240.132 L 607.149 244.916 L 606.763 249.7 L 606.268 254.484 L 605.666 259.268 L 604.96 264.052 L 604.15 268.836 L 603.239 273.62 L 602.228 278.403 L 601.118 283.186 L 599.91 287.969 L 598.605 292.751 L 597.203 297.534 L 595.705 302.315 L 594.112 307.095 L 592.423 311.875 L 590.641 316.655 L 588.764 321.432 L 586.795 326.209 L 584.734 330.983 L 582.586 335.756 L 580.355 340.526 L 578.049 345.291 L 575.683 350.051 L 573.282 354.804 L 570.888 359.547 L 568.578 364.272 L 566.51 368.973 L 565.013 373.625 L 564.902 378.181 L 568.579 382.486 L 574.049 384.393 L 584.558 385.918 L 614.163 386.558 M 345.837 386.558 L 354.098 386.235 L 366.275 384.891 L 372.469 383.072 L 376.082 378.831 L 375.263 374.299 L 372.92 369.656 L 369.996 364.962 L 366.867 360.239 L 363.695 355.498 L 360.564 350.747 L 357.517 345.987 L 354.576 341.222 L 351.753 336.453 L 349.054 331.682 L 346.483 326.908 L 344.04 322.131 L 341.725 317.354 L 339.539 312.574 L 337.482 307.795 L 335.551 303.014 L 333.746 298.232 L 332.068 293.451 L 330.515 288.668 L 329.088 283.885 L 327.787 279.102 L 326.613 274.319 L 325.565 269.535 L 324.646 264.751 L 323.856 259.967 L 323.197 255.184 L 322.671 250.4 L 322.28 245.616 L 322.027 240.832 L 321.914 236.048 L 321.944 231.264 L 322.122 226.481 L 322.452 221.697 L 322.938 216.914 L 323.585 212.131 L 324.4 207.348 L 325.39 202.566 L 326.562 197.785 L 327.924 193.004 L 329.487 188.224 L 331.262 183.445 L 333.262 178.667 L 335.503 173.89 L 338.003 169.116 L 340.782 164.344 L 343.871 159.574 L 347.299 154.809 L 351.113 150.048 L 355.37 145.295 L 360.149 140.553 L 365.574 135.826 L 371.84 131.125 L 379.308 126.471 L 388.751 121.913 L 402.243 117.598 L 426.493 114.132 L 466.623 113.726 L 491.249 116.846 L 502.199 121.076 L 508.451 125.605 L 512.715 130.245 L 515.923 134.94 L 518.474 139.663 L 520.569 144.403 L 522.323 149.154 L 523.809 153.913 L 525.074 158.678 L 526.151 163.447 L 527.068 168.219 L 527.842 172.993 L 528.489 177.769 L 529.021 182.547 L 529.449 187.325 L 529.781 192.105 L 530.025 196.886 L 530.187 201.668 L 530.272 206.449 L 530.287 211.232 L 530.235 216.015 L 530.12 220.798 L 529.947 225.582 L 529.717 230.365 L 529.435 235.148 L 529.104 239.932 L 528.726 244.716 L 528.304 249.5 L 527.84 254.284 L 527.337 259.068 L 526.797 263.853 L 526.221 268.636 L 525.613 273.419 L 524.975 278.203 L 524.308 282.986 L 523.615 287.77 L 522.897 292.552 L 522.157 297.334 L 521.399 302.116 L 520.624 306.896 L 519.835 311.676 L 519.037 316.455 L 518.232 321.233 L 517.427 326.009 L 516.627 330.784 L 515.841 335.557 L 515.081 340.326 L 514.359 345.092 L 513.7 349.852 L 513.135 354.606 L 512.718 359.349 L 512.536 364.075 L 512.754 368.777 L 513.701 373.433 L 516.15 377.993 L 522.317 382.316 L 539.867 385.815 L 578.992 386.311 L 609.733 383.236 L 628.013 379.016 L 632.955 377.476 M 327.045 377.476 L 324.574 374.491 L 319.752 369.852 L 314.503 365.159 L 309.206 360.436 L 304.02 355.696 L 299.019 350.945 L 294.234 346.186 L 289.68 341.421 L 285.36 336.653 L 281.273 331.881 L 277.416 327.107 L 273.785 322.33 L 270.377 317.553 L 267.185 312.774 L 264.207 307.994 L 261.438 303.214 L 258.875 298.432 L 256.515 293.65 L 254.357 288.868 L 252.397 284.085 L 250.636 279.302 L 249.072 274.518 L 247.704 269.735 L 246.534 264.951 L 245.561 260.167 L 244.787 255.383 L 244.213 250.599 L 243.842 245.815 L 243.675 241.032 L 243.717 236.248 L 243.97 231.464 L 244.439 226.68 L 245.129 221.897 L 246.045 217.113 L 247.195 212.331 L 248.585 207.548 L 250.224 202.766 L 252.122 197.984 L 254.289 193.204 L 256.737 188.424 L 259.482 183.645 L 262.539 178.867 L 265.928 174.09 L 269.671 169.316 L 273.796 164.543 L 278.334 159.774 L 283.327 155.008 L 288.825 150.247 L 294.895 145.493 L 301.626 140.75 L 309.15 136.023 L 317.672 131.321 L 327.554 126.664 L 339.534 122.1");
stroke-dasharray: 2538.95, 2538.95;
stroke-dashoffset: 0;
4

2 回答 2

0

您只需要正确设置stroke-dasharray和的组合stroke-dashoffset。一种选择是设置stroke-dasharray为一个“长”行和一个“长”空格,设置stroke-dashoffset为该行最初只是空格并更新 的值stroke-dashoffset以显示路径的相关部分:

<!DOCTYPE html>
<html>
<body>
    <svg width="300" height="300">
        <path id="path0" d="M 50 50 H 250 L 50 250 H 250" stroke-width="5" stroke="black" fill="none" stroke-dasharray="1000 1000" stroke-dashoffset="1000"/>
    </svg>
    <script>
        var p = document.getElementById("path0")
        var i = 1000
        setInterval(function(){ p.setAttribute("stroke-dashoffset",i--) },10)
    </script>
</body>
</html>
于 2020-08-13T09:46:54.433 回答
0

我从@ccprog 的评论中意识到我的路径有多个“M”命令,这可以解释为什么没有“连续”动画。我意识到必须这样做,因为绕地球运行的物体绕着球体转但 SVG 无法传达这一点——因此有多个“M”命令。

我最终做的是获取生成的路径属性并将其分解为子路径并添加动画延迟。

于 2020-08-13T19:24:41.623 回答