1

I'm going for a seamless loop using a combination of apath-dasharray and pathdashoffset

I have a path length of 16.568147659301758 which is reported by both safari and chrome yet the animations between browsers loop differently.

Even when pathLength="1" is set on the <path> (now supported by modern safari). I still get inconsistency.

Is there any way to abstract or get around the divergence in behaviour? I'm sure many graphing libraries have had to solve for this in some way.

codepen with pathLength="1" here

codepen using defined 16.568147659301758 here 

// not needed 
// just to see
//  
// 16.568147659301758

var path = document.querySelector("svg path");
var total = path.getTotalLength();
console.log(total);
@keyframes ldmv{100%{stroke-dashoffset: 16.568147659301758}}
.mkldr{
stroke-dasharray: 2.5 13.06814765930175 ;
animation: ldmv 3s linear infinite;}


/* uncomment below if using   pathLength="1" on the <path */

/* 
@keyframes ldmv{100%{stroke-dashoffset: 1}}
.mkldr{
stroke-dasharray: .1 .9;
animation: ldmv 3s linear infinite;} 
*/
<svg width="256" height="256"
class="mkldr"
viewbox="0 0 6 5"
stroke="currentcolor"
fill="none"
stroke-linecap="butt"
stroke-width=".6">
<!-- no   pathLength="1" below -->
<path 
  id="mkldr" 
  d="m .5 2 
  a 1 1 0 0 1 2 0 l 0 1 
  a 1 1 0 0 0 2 0 l 0 -1 
  a 1 1 0 0 0 -2 0 l 0 1 
  a 1 1 0 0 1 -2 0 z" />
<use  
  xlink:href="#mkldr"  
  transform="
  scale(1,-1) 
  translate(1, -5)"/>
AndyFitz
  • 11
  • 4
  • @RobertLongson is there any way to get around the inconsistency? Surely with all the graphing libraries and animations dependent on stroke-dasharray someone has a technique to solve for this. – AndyFitz Nov 30 '20 at 08:22
  • For those readers who don't have access to Safari, can you elaborate of what the "inconsistency" is? – Paul LeBeau Dec 01 '20 at 11:22
  • sure the stroke-dasharray and stroke-dashoffset repeat at different lengths. gtkwebkit might be able to reproduce - i'll try to check that. the interesting thing is that on both browsers I can record the same length but they are clearly rendered with different lengths – AndyFitz Dec 01 '20 at 11:30

0 Answers0