Złap zmiany na okręgu elementu SVG i zmień atrybuty w innym miejscu za pośrednictwem js
Mam osadzony SVG w dokumencie HTML. Koło (SVG) jest animowane za pomocą<animate>. Próbowałem znaleźć sposób na umieszczenie jakiegoś słuchacza zdarzeń na tym kręgu tylko wtedy, gdy porusza się poziomo.
Po przeniesieniu (poziomo) chciałbym znaleźć współrzędne x okręgu i ustawić trzecią (zewnętrzną) szerokość prostego kształtu na względną pozycję okręgu. Ten trzeci rect będzie podobny do paska postępu śledzącego poziomy postęp okręgu.
Czy koło SVG (nawiasem mówiąc, koło znajduje się w grupie g SVG), które jest przenoszone przez wyzwalanie jakiegoś zdarzenia, mogę ustawić detektor, dzięki czemu będę mógł zmienić atrybut szerokości tego rodzaju paska postępu?
Pomyślałem, że jeśli albo<animate> lub element przeniesiony / zmieniony uruchamia jakieś wydarzenie, które mógłbym spróbować złapać, a następnie zmienić szerokość na pasku.
Odkryłem, że nie jest dobrze używać „niezależnego” animowanego na rect, ponieważ tempo wzrostu jest bardzo różne, gdy koło porusza się w górę. Nie używam elementu canvas, ponieważ staram się zachować skalowalność i semantykę kształtów. (Wolałbym raczej rozwiązanie javascript, ale byłbym wdzięczny za inne podejścia.)
EDYCJA po odpowiedzi: anser ma ben bardzo do piinta i (myślę) pomocny. Jestem bardzo nowy w SVG i mogłem coś źle zinterpretować. Fot z tego powodu włączam kod.
Próbowałem wdrożyć twoje zalecenia i wydaje mi się, że nie udało się. .cx.animVal.value zastosowana do kręgu nie wydaje mi się potrzebna. Dołączę pociętą wersję mojego kodu, która powinna przesunąć piłkę wzdłuż ścieżki, która sama się porusza w poziomie; dwa rects (inBar i outBar) powinny śledzić przemieszczenie poziome rosnące poziomo mniej więcej w tym samym tempie co piłka. Aby upewnić się, że setInterval działa, a pozycja jest poprawnie zebrana, do listy oBall..animVal i oball..baseVal dodano linię. W FF 21.0 nie ma zmiany dla animVal wzdłuż przemieszczenia. Czy poprawnie zrozumiałem twoje sugestie? tutaj postępuj zgodnie z kodem (w tym nagłówki itp., ponieważ w szczególności jestem noobem w 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>
Jeśli kod jest uruchamiany, wydaje się, że animVal dla poruszającego się #ballu pozostaje na tej samej współrzędnej x (50), podczas gdy wyraźnie się porusza.