Как анимировать/двигать SVG ?
Я хочу научится анимировать SVG.
Для этого я нарисовал в inkscape контур : codepen.io/pen на котором изображена машина и кривая с точками. Как можно при onclick на эти точки сделать так что бы машина ехала ? Если можно подробный ответ ..я хочу что бы дошло как это делается |
Максим Ученик,
svg движение по траектории |
Цитата:
|
Максим Ученик,
тут есть код, выше ссылка немного не та. Анимация-движения-объекта-по-траектории-графика-со-сглаженными-линиями |
Цитата:
|
Цитата:
<!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>
|
Цитата:
Инструкция эта текстовая для того чтобы человекам было удобно ее писать и читать. Однако компьютеру не удобно работать с текстом ему удобно работать с конкретными байтами в конкретных ячейках памяти. По этому компьютер парсит документ SVG и на основании него строит DOM объектную модель документа ( по сути это древовидная структура которая хранит ссылки на конкретные данные в памяти ). JS не привязывается к SVG он работает с DOM (объектной моделью документа) т.е. может получать и изменять свойства этой модели и использовать методы. Небольшой пример что бы наглядно увидеть объектную модель SVG элемента. В браузере хром на странице с твоим примером кликни правой кнопкой мыши на красной машинке и выбери «посмотреть код» откроется окно с отладчиком и в этом окне на вкладке консоль можно выполнить код
var SVG_elem = document.body.children[0];
console.dir (SVG_elem ); // DOM
console.dir (SVG_elem .children); // массив корневых объектов
//Ну а дальше все должно быть понятно
SVG_elem .children[2].onclick = function(){
SVG_elem .children[1].setAttribute('transform','translate(20,10)')
};
// Можно кликнуть на первый зеленый круг
Консоль удобна для того чтобы наглядно все увидеть. |
| Часовой пояс GMT +3, время: 12:23. |