I am just new to SVG and I would like to produce a flashing object as shown on code below. However I want the animate to be done on the fly. I have a file with xml for the ellipses and the flashing should happen after the ellipse preceding this one shown has just been altered. I want to do this using javascript but my code is failing to work.Please assist me if you can.
Working code -------------------------------- <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg";> <ellipse id='elli369' cx='305' cy='124 ' rx='7' ry='7' style='fill:rgb(127,127,127);stroke:rgb(127,127,127)' visibility="hidden"> <animate attributeName="visibility" begin="1s" from= "hidden" to ="visible" dur= "1s" repeatCount="20"/> </ellipse> </svg> Code failing to work -------------------------------------------- <svg xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; viewBox="0 0 400 300" version="1.1"> <title>Creating an SVG Animation with Script</title> <script type="text/javascript"> <![CDATA[ function getTarget (event) { var target = event.target; while (target.parentNode !== event.currentTarget) { target = target.parentNode; } return target; } function fade (target) { // find animation target var target = event.target; while (target.parentNode !== event.currentTarget) { target = target.parentNode; } // create the fade animation var animation = document.createElementNS('http://www.w3.org/2000/svg', 'animate'); <!--<animate attributeName="visibility" from= "visible" to ="hidden" dur= "0.01s" repeatCount="1"/>--> animation.setAttributeNS(null, 'attributeName', 'visibility'); animation.setAttributeNS(null, 'begin', '1s'); animation.setAttributeNS(null, 'from', 'hidden'); animation.setAttributeNS(null, 'to', 'visible'); animation.setAttributeNS(null, 'dur', 1s); animation.setAttributeNS(null, 'repeatCount', '20'); // link the animation to the target target.appendChild(animation); // start the animation animation.beginElement(); } ]]> </script> <g> <ellipse id='639' cx='3051' cy='124 ' rx='7' ry='7' style='fill:rgb(127,127,127);stroke:rgb(127,127,127)' visibility="hidden"/> </g> </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/
