Blog del programador: Cálculo del retraso exacto de la animación

Estoy tratando de animar un elemento svg y mi código sigue

const svg = document.querySelector("svg");
// variable for the namespace 
const svgns = "http://www.w3.org/2000/svg"
//assigning svg element attribute 
svg.setAttribute('class', 'layer1');
svg.setAttribute('xmlns', svgns);
svg.setAttribute('viewBox', '0 0 400 200');
//make background
var fill1 = '#e6e6e6';
let bg = document.createElementNS(svgns, 'rect');
bg.setAttribute('class', 'bg');
bg.setAttribute('id', 'bg');
bg.setAttribute('width', '400');
bg.setAttribute('height', '200');
bg.setAttribute('fill', fill1);
svg.appendChild(bg);
//wrapper dimension
var x = 20;
var y = 50;
var width = 200;
var height = 50;
let wrapper = document.createElementNS(svgns, 'rect');
wrapper.setAttribute('class', 'wrapper');
wrapper.setAttribute('id', 'wrapper');
wrapper.setAttribute('x', x);
wrapper.setAttribute('y', y);
wrapper.setAttribute('width', width);
wrapper.setAttribute('height', height);
wrapper.setAttribute('fill', 'none');
wrapper.setAttribute('stroke', 'black');
wrapper.setAttribute('stroke-width', '1');
svg.appendChild(wrapper);
var dur =4;
var delFirst =1;
let tube = document.createElementNS(svgns, 'line');
tube.setAttribute('class', 'tube');
tube.setAttribute('id', 'tube');
tube.setAttribute('x1', x);
tube.setAttribute('x2', x + width);
tube.setAttribute('y1', y + height / 2);
tube.setAttribute('y2', y + height / 2);
tube.setAttribute('stroke', 'brown');
tube.setAttribute('stroke-width', '1');
tube.style.setProperty('--dur',`${dur}s`);
tube.style.setProperty('--delFirst',`${delFirst}s`);
svg.appendChild(tube);
var ln = document.querySelector("#tube");
var path = ln.getTotalLength();
var pct = 1;
var pxl = path - (path * pct);
ln.style.setProperty('--offset', pxl);
ln.style.setProperty("--off", path + 'px');
var gridNum = 4;
var gridStart = width / gridNum;
var counter = gridStart;
for (var i = 0; i < gridNum; i++) {
 let ln = document.createElementNS(svgns, 'line');
 ln.setAttribute('class', 'axisLine' + i);
 ln.setAttribute('id', 'axisLine' + i);
 var x1 = x + counter;
 ln.setAttribute('x1', x1);
 ln.setAttribute('x2', x + counter);
 ln.setAttribute('y1', y);
 ln.setAttribute('y2', y + height);
 ln.style.setProperty('--del', `${(((i+1)/gridNum)*dur)+delFirst}s`);
 ln.setAttribute('stroke', 'green');
 ln.setAttribute('stroke-width', '1.5');
 svg.appendChild(ln);
 counter = counter + gridStart;
 
}

.tube {
 stroke-dasharray: var(--off);
 stroke-dashoffset: var(--off);
 animation: effect var(--dur) ease-out var(--delFirst) forwards;
}
[class^="axisLine"] {
 transform-box: fill-box;
 transform-origin: bottom;
 stroke-width: 1;
 color: green;
 animation: rotate 1s linear var(--del) 1 alternate forwards;
}
@keyframes effect {
 100% {
 stroke-dashoffset: var(--offset);
 }
}
@keyframes rotate {
 0% {
 transform: rotate(0deg);
 }
 50% {
 transform: rotate(7.5deg);
 }
}

<!DOCTYPE html>
<html>
<body>
 <link rel="stylesheet" href="style.css"></link>
 <svg>
 <script href="index.js"></script> 
</svg>
</body>
</html>

Solución del problema

Al resolver tales problemas, cuando varias animaciones están interconectadas, es mejor usar SMIL SVG (en mi opinión).
Dado que smil tiene una poderosa herramienta que le permite establecer de manera flexible las condiciones para iniciar, pausar y detener animaciones secuenciales. Si es necesario cambiar aún más la lógica del trabajo de muchas animaciones, basta con cambiar las cadenas lógicas en el beginatributo.
begin="dash1.end+1s"

El siguiente ejemplo ejecuta múltiples animaciones una tras otra, pero no necesitamos contar los tiempos y retrasos para cada animación.

La animación comienza después de hacer clic en el lienzo.

#tube {
stroke:red;
}
.axisLine {
stroke:green;
}

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 viewBox="0 0 400 200" > 
 
<rect x="20" y="50" width="200" height="50" fill="none" stroke="black" />
 <path id="tube" stroke-dasharray="0,200" d="M20,75 220,75" >
 <animate id="dash1" attributeName="stroke-dasharray" begin="svg1.click" dur="1s" values="0 200;50 150" fill="freeze" /> 
 <animate id="dash2" attributeName="stroke-dasharray" begin="dash1.end+1s" dur="1s" values="50 150;100 100" fill="freeze" /> 
 <animate id="dash3" attributeName="stroke-dasharray" begin="dash2.end+1s" dur="1s" values="100 100;150 50" fill="freeze" />
 <animate id="dash4" attributeName="stroke-dasharray" begin="dash3.end+1s" dur="1s" values="150 50;200 0" fill="freeze" />
 </path> 
 <!-- vertical green lines -->
 <path id="line1" class="axisLine" d="M70,50 70,100"/> 
 <path id="line2" class="axisLine" d="M120,50 120,100"/> 
 <path id="line3" class="axisLine" d="M170,50 170,100" />
 <path id="line4" class="axisLine" d="M220,50 220,100" />
</svg>