nicht angemeldet
SVG Attributwert während der Animation abfangen
Hallo Forum!
Ich starte unter SVG eine Animation:
(Ist ein Balken, der vom unteren Bildschirmrand noch oben läuft)
<rect x="100" y="100" width="500" height="20" stroke="blue" stroke-width="3px" fill="#000099">
<animate id="wolke7" attributeName="y" attributeType="XML" begin="0s" dur="10s" repeatDur="indefinite" fill="freeze" from="450" to="0" />
</rect>
Nun möchte ich, wenn dieser Balken einen bestimmmten Wert erreicht hat, dass eine Aktion ausgeführt wird. Dachte mit JS:
function play()
{
svgroot.unpauseAnimations();
var document = evt.getTarget().getOwnerDocument();
var balken = document.getElementById('wolke7');
var limit = balken.getAttribute('attributeName');
if (wasserz > 200)
alert(limit);
}
Der Balken läuft aber ohne Reaktion durch und gibt mir aber ohne die if-Schleife nur das "y" von attributeName= aus. Wie kriege ich den aktuellen Wert einer Animation ermittelt?
Claudi
-
Hallo,
<rect x="100" y="100" width="500" height="20" stroke="blue" stroke-width="3px" fill="#000099">
<animate id="wolke7" attributeName="y" attributeType="XML" begin="0s" dur="10s" repeatDur="indefinite" fill="freeze" from="450" to="0" />
</rect>
...
Der Balken läuft aber ohne Reaktion durch und gibt mir aber ohne die if-Schleife nur das "y" von attributeName= aus. Wie kriege ich den aktuellen Wert einer Animation ermittelt?Wenn das rect-Element id="rechteck" bekommt, dann erhaelt man den aktuellen animierten Wert von y so:
document.getElementById("rechteck").y.animVal.value
(den Ausgangswert ueberigens mit baseVal statt animVal).
Leider klappt das mit dem ASV 3.01 gar nicht und im ASV 6.0 preview1 sehe ich zwar beim Aufruf von
alert(document.getElementById("rechteck").y);
die Ausgabe [object SVGAnimatedLength], aber waehrend der Animation wird stets der baseVal (also 100) statt dem animVal erhalten.
Als Workaround mit setInterval() / clearInterval() eine eigene Funktion schreiben, die zeitlich parallel zur Animation laeuft und die Zwischenwerte ausrechnet, wobei man dann die Animation auch gleich via DOM und setAttribute() selbst bauen koennte ...
MfG, Thomas
-
[Nachtrag:]
Leider klappt das mit dem ASV 3.01 gar nicht und im ASV 6.0 preview1 sehe ich zwar beim Aufruf von
alert(document.getElementById("rechteck").y);
die Ausgabe [object SVGAnimatedLength], aber waehrend der Animation wird stets der baseVal (also 100) statt dem animVal erhalten.
Mit dem ASV 6.0 klappt es doch wie gewuenscht -- ich hatte versehentlich nur ein Mal nach dem Laden den animVal-Wert abgefragt und am Anfang ist dieser natuerlich gleich dem baseVal-Wert.
Testcode mit Ausgabe des animVal-Wertes aller 100ms in einen Textknoten:
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><svg onload="init()">
<defs>
<script type="text/javascript">
<![CDATA[function init()
{
setInterval("document.getElementById('wert').firstChild.setData(document.getElementById('rechteck').y.animVal.value)",100);
}]]>
</script>
</defs><rect id="rechteck" x="100" y="100" width="500" height="20" stroke="blue" stroke-width="3px" fill="#000099">
<animate attributeName="y" attributeType="XML" begin="0s" dur="10s" repeatDur="indefinite" fill="freeze" from="450" to="0"/>
</rect><text x="20" y="50" id="wert">y</text>
</svg>
MfG, Thomas
-
Hallo Thomas!
Funktioniert mit 6.0 prima. Darauf kann ich aufbauen, muß mich aber wohl doch noch ne ganze Menge mit dem ganzen DOM-Kram beschäftigen.
Vielen Dank
Claudi
-
Hallo,
Funktioniert mit 6.0 prima. Darauf kann ich aufbauen, muß mich aber wohl doch noch ne ganze Menge mit dem ganzen DOM-Kram beschäftigen.
Ich habe zum Einsatz von baseVal und animVal ein Beispiel online gestellt:
http://svglbc.datenverdrahten.de/?code=baseVal_animVal&znr=off.MfG, Thomas
-
-
-