|
Сообщение от 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>