CODEWITHSUNDEEP
svgstroke-dasharray
SanderDN
SanderDN

Reputation: 516

SVG stroke-dashoffset working strangely on IOS (safari and chrome)

I've been working on an animation that shows a single GPS track being drawn from start to end.

The following works correctly on macOS chrome and safari, and android chrome.

When trying this on my iPad (safari, chrome, firefox), I see that the track is animated incorrectly, as it doesn't nicely go from start to end, but shows multiple starts halfway the track.

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>

Any ideas on how to counter this behaviour?

Upvotes: 3

Views: 996

Answers (1)

Alexandr_TT
Alexandr_TT

Reputation: 14545

I will try to assume that a large number of nodal points in places of a sharp change in the direction of the line is interpreted by some OS as a line break and the presence of not one line, but several

Therefore, the animation of the line, judging by your link, starts in several places at once

enter image description here

I redrawn the line in a vector editor with fewer node points
Try this line option on your gadget

#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>

Upvotes: 3

Related Questions