Поймать изменения в круге элемента SVG и изменить атрибуты в другом месте с помощью js
У меня есть встроенный SVG в документе HTML. Круг (SVG) анимируется с помощью<animate>
, Я пытался найти способ поместить какого-то слушателя событий в этот круг, только когда он движется горизонтально.
После перемещения (по горизонтали) я хотел бы найти x-координаты формы круга и установить третью (внешнюю) ширину прямоугольной формы относительно относительного положения круга. Этот третий прямоугольник будет похож на индикатор выполнения, отслеживающий горизонтальное продвижение круга.
Перемещает ли кружок SVG (кстати, круг внутри g-группы SVG) триггер, какое-то событие, которое я могу установить слушателем, чтобы затем я мог изменить атрибут ширины в виде индикатора выполнения?
Я думал, что если либо<animate>
или перемещенный / измененный элемент вызывает какое-то событие, которое я мог бы попытаться поймать, а затем изменить ширину на панели.
Я обнаружил, что не очень хорошо использовать «независимую» анимацию на прямоугольнике, поскольку темпы роста сильно отличаются, когда круг движется вверх. Я не использую элемент canvas, потому что я пытаюсь сохранить масштабируемость и семантику форм. (Я бы предпочел решение javascript, но я был бы благодарен за другие подходы.)
РЕДАКТИРОВАТЬ после ответа: Anser очень много сделал для piint и (я думаю) полезно. Я очень новичок в SVG и, возможно, что-то неправильно истолковал. По этой причине я включаю код.
Я пытался выполнить ваши рекомендации, и мне, похоже, не удалось. .cx.animVal.value, примененное к кругу, похоже, не дает мне то, что мне нужно. Я включу расколотую версию моего кода, которая должна перемещать шар по траектории, которая сама перемещается горизонтально; две линии (inBar и outBar) должны отслеживать горизонтальное смещение, растущее по горизонтали более или менее с той же скоростью, что и мяч. Чтобы убедиться, что setInterval работает и позиция собрана правильно, была добавлена строка в список oBall..animVal и oball..baseVal. В FF 21.0 нет никаких изменений для animVal вдоль смещения. Правильно ли я понял ваши предложения? здесь следуйте коду (включая заголовки и т. д., поскольку я нуб в SVG в частности):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head><title>Motion</title>
<script>function beginAnim(anim,sPos){anim.beginElement();}</script>
</head>
<body>
<div id="here">
<button onclick="beginAnim(document.getElementById('anim'),'out');">START</button>
</div>
<div style="height:350px;">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<script type="text/ecmascript">
<![CDATA[
function trckngBars(){
oDiv=document.getElementById('here');
var oBall=document.getElementById('ball');
var oBar=[document.getElementById('inBar'),document.getElementById('outBar')];
idTimer=self.setInterval(function(){updtBars(oBall,oBar);},100);
}
function updtBars(oBall,oBar){
var xCoor=String(oBall.cx.animVal.value);
oDiv.innerHTML+='==>'+oBall.cx.animVal.value+'..'+oBall.cx.baseVal.value;
oBar[0].setAttribute("width",xCoor);
oBar[1].setAttribute("width",xCoor);
}
// ]]>
</script>
<defs>
<path id="throw" d="M0,0 q 80,-55 200,20" style="fill: none; stroke: blue;" />
</defs>
<g>
<g>
<rect x="2" y="50" width="400" height="110" style="fill: yellow; stroke: black;"></rect>
</g>
<g>
<!-- show the path along which the circle will move -->
<use id="throw_path" visibility="hidden" xlink:href="#throw" x="50" y="130" />
<circle id="ball" cx="50" cy="130" r="10" style="fill: red; stroke: black;">
<animateMotion id="ball_anim" begin="anim.begin+1s" dur="6s" fill="freeze" onbegin="trckngBars();" onend="window.clearInterval(idTimer);">
<mpath xlink:href="#throw" />
</animateMotion>
</circle>
<rect id="inBar" x="50" y="205" width="20" height="30" style="fill: purple;stroke-linecap: butt;">
<!-- <animate attributeType="XML" attributeName="width" from="0" to="200" begin="ball_anim.begin" dur="6s" fill="freeze" /> -->
</rect>
</g>
<animateTransform id="anim" attributeType="XML" attributeName="transform" type="translate" from="0" to="200" begin="indefinite" dur="10s" fill="freeze" />
</g>
<rect id="outBar" x="50" y="235" width="10" height="30" style="fill: orange;stroke-linecap: butt;">
<!-- <animate attributeType="XML" attributeName="width" from="0" to="400" begin="anim.begin+1s" dur="10s" fill="freeze" /> -->
</rect>
</svg>
</div>
</body>
</html>
Если код запускается, кажется, что animVal для движущегося #ball остается в том же x-координатном (50), пока он явно движется.