Форум

Максим Ученик · #1 (**permalink**) 13.08.2019, 13:14

Я хочу научится анимировать SVG.
Для этого я нарисовал в inkscape контур :
codepen.io/pen на котором изображена машина и кривая с точками.

Как можно при onclick на эти точки сделать так что бы машина ехала ?
Если можно подробный ответ ..я хочу что бы дошло как это делается

рони · #2 (**permalink**) 13.08.2019, 14:14

Максим Ученик,
svg движение по траектории

Максим Ученик · #3 (**permalink**) 13.08.2019, 14:16

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

Максим Ученик,
svg движение по траектории

я видел это, но как привязать к своему SVG не знаю и к тому же я так понял что тот кто задал вопрос сам не шарит

рони · #4 (**permalink**) 13.08.2019, 14:38

Максим Ученик,
тут есть код, выше ссылка немного не та.
Анимация-движения-объекта-по-траектории-графика-со-сглаженными-линиями

Максим Ученик · #5 (**permalink**) 13.08.2019, 14:41

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

Максим Ученик,
тут есть код, выше ссылка немного не та.
Анимация-движения-объекта-по-траектории-графика-со-сглаженными-линиями

а вы можете показать как тот js привязать к моему svg ?

рони · #6 (**permalink**) 13.08.2019, 17:22

Сообщение от Максим Ученик

а вы можете показать как тот 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>

MallSerg · #7 (**permalink**) 13.08.2019, 17:30

Цитата:

а вы можете показать как тот js привязать к моему svg ?

SVG это текстовое описание векторной графики т.е. грубо говоря инструкция компьютеру как рисовать изображение из каких элементов и как их расположить.
Инструкция эта текстовая для того чтобы человекам было удобно ее писать и читать.
Однако компьютеру не удобно работать с текстом ему удобно работать с конкретными байтами в конкретных ячейках памяти.
По этому компьютер парсит документ 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)')
};
// Можно кликнуть на первый зеленый круг

Консоль удобна для того чтобы наглядно все увидеть.

Форум

Справочник

Discord чат

Курсы javascript