Масштабирование времени в SVG
 

Не нашёл параметра, чтобы замедлить/ускорить SVG-анимацию одним параметром. Написал скрипт:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg
	xmlns="http://www.w3.org/2000/svg"
	xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
	width="320" height="240"
	version="1.1"
	onload='setTimeout(`window.location.href=""`, 150000); main()'
>
<title>Time Scaler</title>
<script>
function main() {
	var	all = document.querySelectorAll("*");
	var	arr = [];
	all.forEach(function(el) {
		var	begin = el.getAttribute("begin");
		var	dur = el.getAttribute("dur");
		if(begin)
			el.setAttribute("begin", parseFloat(begin) * 2 + "s");
		if(dur)
			el.setAttribute("dur" , parseFloat(dur) * 2 + "s");
		if(begin || dur)
			arr.push(`begin:${begin}=${el.getAttribute("begin")}, dur:${dur}=${el.getAttribute("dur")}`);
	});
	console.log(arr.join('\r\n'));
}
</script>
<desc>
</desc>
<defs>
<path	id='rectick'
	d='M	0 99,1 98,2 97,3 96,4 95,5 94,6 93,7 92,8 91,9 90,10 89,11 88,12 87,13 86,14 85,15 84,16 83,17 82,18 81,19 80,
		20 79,21 78,22 77,23 76,24 75,25 74,26 73,27 72,28 71,29 70,30 69,31 68,32 67,33 66,34 65,35 64,36 63,37 62,38 61,39 60,
		40 59,41 58,42 57,43 56,44 55,45 54,46 53,47 52,48 51,49 50,50 49,51 48,52 47,53 46,54 45,55 44,56 43,57 42,58 41,59 40,
		60 39,61 38,62 37,63 36,64 35,65 34,66 33,67 32,68 31,69 30,70 29,71 28,72 27,73 26,74 25,75 24,76 23,77 22,78 21,79 20,
		80 19,81 18,82 17,83 16,84 15,85 14,86 13,87 12,88 11,89 10,90 9,91 8,92 7,93 6,94 5,95 4,96 3,97 2,98 1,99 0'/>
</defs>

<rect	x='0' y='0'
	width='20'
	height='20'
	fill='black'>

	<animateMotion
		begin='0s'
		dur='10s'
		fill='freeze'
		repeatCount='1'>

		<mpath xlink:href='#rectick'/>

	</animateMotion>

</rect>
</svg>

Но анимация на полпути прекращается. Почему?

Ясно, что у меня это - костыль.:haha:

Можно изящнее?

Спасибо!:thanks:

Paguo-86PK,

function main() {
    var	all = document.querySelectorAll("[dur]");
    all.forEach(function(el) {
      var dur = el.getAttribute("dur");
      el.setAttribute("dur" , (parseFloat(dur)/5) + "s");
    });
}

рони, всё-таки думал, есть более изящный способ.
Лучше буду делать прямо в canvas…

Но, всё равно…
Спасибо!:thanks: