Поймать изменения в круге элемента SVG и изменить атрибуты в другом месте с помощью js
У меня есть встроенный SVG в документе HTML. Круг (SVG) анимируется с помощью, Я пытался найти способ поместить какого-то слушателя событий в этот круг, только когда он движется горизонтально.
После перемещения (горизонтально) яЯ хотел бы найти x-координаты формы круга и установить третью (внешнюю) ширину прямоугольной формы относительно относительной позиции круга. Этот третий прямоугольник будет похож на индикатор выполнения, отслеживающий горизонтальное продвижение круга.
Перемещает ли кружок SVG (кстати, круг внутри g-группы SVG) триггер, какое-то событие, которое я могу установить слушателем, чтобы затем я мог изменить атрибут ширины в виде индикатора выполнения?
Я думал, что если либо или перемещенный / измененный элемент вызывает какое-то событие, которое я мог бы попытаться поймать, а затем изменить ширину на панели.
Я обнаружил, что это не очень хорошо использовать "независимый» одушевьте прямоугольник, поскольку темпы роста сильно отличаются, когда круг движется вверх. Я не использую элемент canvas, потому что я пытаюсь сохранить масштабируемость и семантику форм. (Я бы предпочел решение javascript, но я был бы благодарен за другие подходы.)
РЕДАКТИРОВАТЬ после ответа: Anser очень много сделал для piint и (я думаю) полезно. Я очень новичок в SVG и, возможно, что-то неправильно истолковал. По этой причине я включаю код.
Я пытался выполнить ваши рекомендации, и мне, похоже, не удалось. .cx.animVal.value, примененное к кругу, похоже, не дает мне то, что мне нужно. Я включу расколотую версию моего кода, которая должна перемещать шар по траектории, которая сама перемещается горизонтально; две линии (inBar и outBar) должны отслеживать горизонтальное смещение, растущее по горизонтали более или менее с той же скоростью, что и мяч. Чтобы убедиться, что setInterval работает и позиция собрана правильно, была добавлена строка в список oBall..animVal и oball..baseVal. В FF 21.0 нет никаких изменений для animVal вдоль смещения. Правильно ли я понял ваши предложения? здесь следуйте коду (включая заголовки и т. д., поскольку я нуб в SVG в частности):
Motion
function beginAnim(anim,sPos){anim.beginElement();}
START
Если код запускается, кажется, что animVal для движущегося #ball остается в том же x-координатном (50), пока он явно движется.