SVG笔划破折号在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>