Javascript-форум - SVG + CSS = разный тайминг

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - SVG + CSS = разный тайминг (https://javascript.ru/forum/dom-window/68030-svg-css-%3D-raznyjj-tajjming.html)

SVG + CSS = разный тайминг

Подскажите, что не так? Линия должна прорисовываться 10 секунд и круг смещаться должен вдоль этой же линии 10 секунд, но на практике все не так :(((

<html><body><head>
	<style> 
		.my_path {
			stroke-dasharray: 100%;
			stroke-dashoffset: 100%;
			animation: dash 10s linear forwards;
		}
		@keyframes dash {
		  from {
		    stroke-dashoffset: 100%;
		  }
		  to {
		    stroke-dashoffset: 0%;
		  }
		}
	</style>
</head>
<svg width="400" height="300">
        <path class="my_path" d="M 50,100 L 100,100 L 200,100 L 250,100"
          fill="rgb(100, 100, 100)" stroke="#888" stroke-width="2"/>	
	 <circle cx="0" cy="0" r="10" fill="rgb(99,199,99)">
		<animateMotion begin="0s" dur="10s" 
		  path="M 50,100 L 100,100 L 200,100 L 250,100" />
	</circle>

</svg>
</body></html>

Цитата:

Сообщение от Dimasick

Линия должна прорисовываться 10 секунд и круг смещаться должен вдоль этой же линии 10 секунд

Что-то подсказывает мне, что ты не так интерпретировал значения атрибутов... ;)
Так вроде синхронно получается.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
.my_path {
	stroke-dasharray: 100%;
	stroke-dashoffset: 100%;
	animation: dash 10s linear forwards;
}
@keyframes dash {
  from {
	stroke-dashoffset: 100%;
  }
  to {
	stroke-dashoffset: 0%;
  }
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<svg width="400" height="300">
        <path class="my_path" d="M 50,100 L 100,100 L 200,100 L 250,100"
          fill="rgb(100, 100, 100)" stroke="#888" stroke-width="2"/>	
	 <circle cx="0" cy="0" r="10" fill="rgb(99,199,99)">
		<animateMotion begin="0s" dur="6s" 
		  path="M 50,100 L 100,100 L 200,100 L 250,100" />
	</circle>
</svg>
</body>
</html>

И какие же значения атрибутов я не так интерпретировал? ksa, написать 6s вместо 10s - это не выход, мне нужно понимать, как правильно согласовывать эти значения.

Цитата:

Сообщение от Dimasick

И какие же значения атрибутов я не так интерпретировал?

Того же dur у animateMotion...
Он вроде как и описан

Цитата:

Определяет продолжительность анимации

http://webix.pro/svg/spravochnik/atr...ml#dur-animate

Но ведь JS не является ЯП реального времени.

Цитата:

Сообщение от Dimasick

написать 6s вместо 10s - это не выход, мне нужно понимать, как правильно согласовывать эти значения

К сожалению - никак этого не сделать. :(
Все эти временные "задержки", "отсечки" в JS весьма условны. Сильно зависят от загруженности браузера и быстродействия железа, на котором все происходит...
Кроме как "подбор" мало что подойдет тебе для решения такой, казалось бы простенькой, задачки...

ок, сформулирую вопрос иначе: можно ли методами svg организовать прорисовку линии (path) так, чтобы она равномерно (!) увеличивала свою длинну? при этом желательно, чтобы растущий конец линии имел какой-нибудть маркер в виде кружка? я кодга смотрю на свою исходную реализацию, то вижу, что JS работает равномерно, а вот именно SVG - нет. удивляет еще то, что если stroke-dasharray и stroke-dashoffset задавать в пикселях, то все работает нормально, НО если в процентах - то ненормально :( а мне нужны именно проценты, т.к. я заранее не знаю, какая линия у меня будет (она будет генериться при создании страницы).

задача решена с помощью
len = path.getTotalLength();