Dear all, I'm trying to get the x - y values of an object moving along a motion path (SMIL animate...). I'm trying it using animVal. I get a negative result. Although the method works for simple animations, it seems it does not work for anim along a path... Is there a way of making it work? Below, find some code I adapted from one of Doug's examples. Try clicking the moving objects!
Regards, Tim. <?xml version='1.0' standalone='no'?> <!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 20001102//EN' 'http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd'> <svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg' onload='Init(evt)'> <title>Animated Values Test</title> <desc> Click on a shape, and the other shape will move to its animated value. Original Written by Doug Schepers [[email protected]], January 2004. Attempt by Tim to retrieve the x y values of an object moving along a motion path. </desc> <script><![CDATA[ var SVGDocument = null; var SVGRoot = null; var Mary = null; var littleLamb = null; var Pinky = null; var Satellite = null; var Satellite2 = null; function Init(evt) { SVGDocument = evt.target.ownerDocument; SVGRoot = SVGDocument.documentElement; Mary = SVGDocument.getElementById('Mary'); littleLamb = SVGDocument.getElementById('littleLamb'); Pinky = SVGDocument.getElementById('Pinky'); Satellite = SVGDocument.getElementById('Satellite'); Satellite2 = SVGDocument.getElementById('Satellite2'); } function SetRect(evt) { var aniCircle = evt.target; var aCX = Number(aniCircle.cx.animVal.value); littleLamb.x.baseVal.value = aCX //littleLamb.setAttributeNS(null, 'x', aCX); } function SetCircle(evt) { var aniRect = evt.target; var aRY = Number(aniRect.y.animVal.value); Mary.cy.baseVal.value = aRY //Mary.setAttributeNS(null, 'cx', aRY); } function getPinkysPosition(evt) { var aniPinky = evt.target; var aCX2 = Number(aniPinky.cx.animVal.value); var aCY2 = Number(aniPinky.cy.animVal.value); alert('The x-y coordinates of Pinky are: ' + aCX2 + ' ' + aCY2) } function getSatellitesPosition(evt) { var aniSatellite = evt.target; var aCXsat = Number(aniSatellite.cx.animVal.value); var aCYsat = Number(aniSatellite.cy.animVal.value); alert('The x-y coordinates of Satellite are: ' + aCXsat + ' ' + aCYsat) } function getSatellite2sPosition(evt) { var aniSatellite2 = evt.target; var aCXsat2 = Number(aniSatellite2.cx.animVal.value); var aCYsat2 = Number(aniSatellite2.cy.animVal.value); alert('The x-y coordinates of Satellite2 are: ' + aCXsat2 + ' ' + aCYsat2) } function alertStr(el) { str=[] for (i in el) { try { str.push(i+'\t'+el[i]) } catch (e) { str.push(i+'\t[error]') } var a=str.length/20 for (var i=0;i<a;i++) { alert(str.splice(0,20).join('\n')) } } } ]]></script> <circle id='Mary' cx='0' cy='50' r='20' style='fill:red2; ' onclick='SetRect(evt)'> <animate attributeName='cx' attributeType='XML' begin='0s' dur='10s' repeatCount='indefinite' values='10; 200; 10'/> </circle> <rect id='littleLamb' x='10' y='30' width='40' height='40' rx='5' ry='5' style='fill:blue; ' onclick='SetCircle(evt)'> <animate attributeName='y' attributeType='XML' begin='0s' dur='10s' repeatCount='indefinite' values='10; 200; 10'/> </rect> <circle id="Pinky" cy="300" r="40" fill="pink" onclick='getPinkysPosition(evt)'> <animate attributeName='cx' attributeType='XML' dur='5s' values='0;200;0' repeatCount='indefinite'/> </circle> <path fill = "none" stroke="red" d="M 100 0 A 100 100 0 1 1 -100 0 A 100 100 0 1 1 100 0" transform="translate(100,200)"/> <circle id="Satellite2" r="20" fill="orange" onclick='getSatellite2sPosition(evt)' transform="translate(100,200)"> <animateMotion path="M 100 0 A 100 100 0 1 1 -100 0 A 100 100 0 1 1 100 0" dur="10s" rotate="auto" repeatCount="indefinite"/> <path fill = "none" stroke="red" d="M 100 0 A 100 100 0 1 1 -100 0 A 100 100 0 1 1 100 0" transform="translate(300,200)"/> <g style="fill:lime" transform="translate(300,200)"> <animateMotion path="M 100 0 A 100 100 0 1 1 -100 0 A 100 100 0 1 1 100 0" dur="8s" repeatCount="indefinite" rotate="auto"/> <circle id="Satellite" r="20" onclick='getSatellitesPosition(evt)'/> </g> </circle> <text x = "10" y="360" style="font-size:15pt; fill:darkblue" >I would like getting the dynamic x - y coordinates of objects</ text> <text x = "10" y="380" style="font-size:15pt; fill:darkblue" >moving along paths...</text> <text x = "10" y="400" style="font-size:15pt; fill:darkblue" >Try clicking the shapes. The orange, pink and lime shapes</ text> <text x = "10" y="420" style="font-size:15pt; fill:darkblue" >will trigger an alert telling their coordinates...</text> <text x = "10" y="440" style="font-size:15pt; fill:darkblue" >But the coordinates of the circles moving in circles remain 0;0 :(</text> <text x = "10" y="480" style="font-size:25pt; fill:purple" >Any solution :)?</text> </svg> ------------------------------------ ----- To unsubscribe send a message to: [email protected] -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ----Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> Your email settings: Individual Email | Traditional <*> To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) <*> To change settings via email: mailto:[email protected] mailto:[email protected] <*> To unsubscribe from this group, send an email to: [email protected] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
