SVG stroke-dashoffset 在 IOS(safari 和 chrome)上运行异常

Question

我一直在制作一个动画，显示从头到尾绘制的单个 GPS 轨迹。

以下内容可在 macOS chrome 和 safari 以及 android chrome 上正常运行。

在我的 iPad(safari、chrome、firefox)上尝试这个时，我发现轨道的动画不正确，因为它从头到尾的效果不佳，而是在轨道的中途显示了多个起点。

console.log('total path length is: ', document.getElementById("path").getTotalLength())

#path {
  stroke-dasharray: 714;
  stroke-dashoffset: 714;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

<svg width="600" height="500">
  <g transform="translate(-200,-300)">
    <path stroke="black" fill="none" d="M583,313L587,317L589,319L590,322L590,324L589,327L589,329L589,332L588,334L588,337L587,340L587,343L587,346L586,348L585,351L585,353L584,356L584,359L583,361L583,364L582,367L582,369L582,372L581,374L581,377L580,379L579,382L579,385L578,388L577,390L577,392L578,395L577,398L576,400L576,404L576,406L576,409L576,412L576,414L576,417L576,420L576,423L576,425L577,428L577,431L577,434L577,436L578,439L578,442L578,444L578,447L578,449L579,452L579,454L580,457L581,460L581,463L582,465L582,468L583,470L584,473L585,475L587,478L588,481L589,484L590,487L591,490L593,492L592,494L593,497L591,498L588,498L585,499L582,499L579,500L577,500L574,500L571,501L569,501L566,502L563,502L561,503L558,502L555,502L553,502L550,502L547,502L545,501L542,500L539,500L536,500L534,500L531,500L527,500L525,500L522,500L519,501L517,502L514,502L511,503L509,504L506,505L503,505L501,506L497,507L496,508L494,511L493,514L491,516L490,518L488,521L486,523L485,525L483,527L482,529L479,532L478,534L476,536L475,538L473,541L472,543L470,546L468,548L467,550L466,553L464,556L462,558L461,560L459,562L457,564L456,567L454,569L452,571L450,573L449,576L447,578L445,580L444,582L442,584L440,586L439,589L438,591L436,593L435,596L434,598L433,600L431,602L430,605L429,607L428,609L427,612L425,614L424,616L422,619L421,621L420,624L419,626L418,628L417,631L416,633L414,635L413,638L412,640L411,642L410,645L409,647L408,650L407,653L406,655L405,658L404,660L403,662L402,665L401,667L400,670L399,672L397,675L396,677L394,680L393,682L392,685L391,687L390,690L389,692L388,694L387,696L385,699L384,701L382,703L381,706L379,708L378,710L377,712L376,715L374,717L372,719L371,722L370,724L368,726L367,728L365,731L363,733L361,735L359,736L357,738L355,739L353,741L351,743L349,745L347,747L345,749L342,751L340,753L338,754L336,754L334,752L333,750L331,748L329,745L328,743L326,741L324,739L322,737L321,735L319,732L317,730L315,728L313,726L311,724L310,722L308,720L307,718L305,716L304,713L302,710L301,708L300,705L299,703L299,700L298,697L298,694L297,692L297,689L296,686L295,684L294,682L292,679L291,677L290,674L288,672L286,670L284,668L282,666L281,664L279,662L277,660L276,658L273,656" id="path" stroke-width="5px">
    </path>
  </g>
</svg>

关于如何应对这种行为有什么想法吗？

Answer 1

我将尝试假设一些操作系统将线条方向急剧变化的地方的大量节点解释为换行符，并且存在的不是一条线，而是多条线

因此，行的动画，通过your link判断, 同时在几个地方开始

我在矢量编辑器中用更少的节点重新绘制了线条
在您的小工具上试试这个线路选项

#path {
  stroke-dasharray: 675;
  stroke-dashoffset: 675;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="500" version="1.1">
  <path id="path" d="m379 18.7 4.1 5.6-13.1 64-1.1 23.6 1.5 29.6 3.7 22.5 5.6 16.9 4.5 10.5-28.1 3.7-23.2-1.9-17.6 0.4-23.2 7.5-28.9 40.5-26.4 36.9-21.1 35.6-9.2 22.1-15.4 33.9-15.9 29.7-13.2 22.2-10.1 9.5-14.8 13.2-28.6-37.6-4.2-19.1L93.2 368.1 77.9 350.6" style="fill:none;stroke-width:5;stroke:black"/>
</svg>
<script>
console.log('total path length is: ', document.getElementById("path").getTotalLength());
</script>