|
Цитата:
|
|
а вы можете показать как тот 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)')
};
// Можно кликнуть на первый зеленый круг
Консоль удобна для того чтобы наглядно все увидеть.