|
Сообщение от Максим Ученик
|
|
а вы можете показать как тот js привязать к моему svg ?
|
как заменить корабль на ваш автомобиль не знаю, я в курсе про атрибут d.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#ship {
fill: #f00;
}
circle {
cursor: pointer;
fill: #0f0;
stroke-width: 0;
}
circle.active {
fill: #e53326;
stroke: #e53326;
stroke-width: 3px;
}
</style>
</head>
<body>
<svg viewBox="0 87 297 210" xmlns="http://www.w3.org/2000/svg" id="svg">
<path id="track" d="m49.400055 146.13617s23.854965-43.03965 42.873513-37.93835c44.256412 11.87077-9.097773 106.24714 32.851512 123.85504 27.45974 11.52601 51.42221-45.95609 80.42507-38.29061 34.81807 9.20245 55.48565 86.15137 55.48565 86.15137" fill="none" stroke="#000" stroke-width=".30px"></path>
<path id="ship" d="m-10,-5l-10,-10l15,3l5,-10l5,10l15,-3l-10,10z"></path>
</svg>
<script>
let count = 5,
len = track.getTotalLength(),
seg = len / (count - 1),
pos = 0,
target = 0;
svg.innerHTML += Array(count).fill(0).map((e, i) => {
let len = seg * i, p = track.getPointAtLength(len);
return " <circle data-len="+len+" r=6 cx="+p.x+" cy="+p.y+" class"+(i?'':'=active')+"></circle>"
}).join('');
render();
function render() {
let dp = target - pos;
pos += Math.abs(dp) < 1 ? 0 : Math.sign(dp);
let p1 = track.getPointAtLength(pos),
p2 = track.getPointAtLength(pos + 1),
a = Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;
ship.setAttribute("transform", "translate("+p1.x+","+p1.y+") rotate("+a+")");
requestAnimationFrame(render)
}
let circles = document.querySelectorAll('circle');
circles.forEach(c => c.onclick = e => {
circles.forEach(c1 => c1.classList.toggle('active', c===c1))
target = +c.dataset.len;
});
</script>
</body>
</html>