Почему Сhrome показывает ошибку? JavaScript setAttribute()

Почему в консоли Сhrome отображается ошибка JavaScript:

attribute d: Expected moveto path command ('M' or 'm'), "NaN,1".

<video id="vd" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4"></video>
<div id="prg">
    <svg id="ldPrg"><path id="prgB" d=""/></svg>
</div>

Сам JS код. Если все переменные кроме cnv заменить имеющимися вычеслениями и удалить -strt, то всё работает, но отрисавывает не корректно.

vd.onprogress=function(){
    for(i=0;i<vd.buffered.length;i++){
        cnv=prg.clientWidth/vd.duration;
        strt=vd.buffered.start(i)*cnv;
        prgB.setAttribute('d',prgB.getAttribute('d')+'M'+strt+',1'+' '+vd.buffered.end(i)*cnv-strt+',1')
    }
}

vd.onprogress = function() {
  console.log('vd.onprogress');
  for (let i = 0; i < vd.buffered.length; i++) {
    let cnv = prg.clientWidth / vd.duration;
    let strt = vd.buffered.start(i) * cnv;
    let value = prgB.getAttribute('d') + 'M' + strt + ',1' + ' ' + vd.buffered.end(i) * cnv - strt + ',1';
    console.log(prgB.getAttribute('d'), cnv, strt, value);
    prgB.setAttribute('d', value);
  }
}
<video id="vd" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4" style="width:240px"></video>
<div id="prg">
  <svg id="ldPrg"><path id="prgB" d=""/></svg>
</div>


Ответы (0 шт):