The argument of the function fade should be called "event", not
"target". With the previously defined function getTarget, the first
part in fade can be simplified to
var target = getTarget(event);
Or otherwise you don't need to define an extra function for it.
Since you start the animation with
animation.beginElement();
you can set its begin value to "indefinite", so it doesn't matter at
what time fade is called.
And of course you need to call the function fade somewhere. The way
you wrote it it's obviously meant to be used as an event handler on
the <g> element containing the ellipse.
Use this code to have fade called whenever an attribute of the ellipse
got altered by script:
document.getElementById("639").parentNode.addEventListener("DOMAttrModified",
fade, false);
This must be called after the function fade was declared, and after
the ellipse was loaded, obviously.
--- In svg-developers@yahoogroups.com, "zieff_2000" <[EMAIL PROTECTED]>
wrote:
>
> 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/
