W3C home > Mailing lists > Public > www-smil@w3.org > October to December 2003

RE: newby : pb with SVG and SMIL

From: Patrick Schmitz <cogit@ludicrum.org>
Date: Wed, 5 Nov 2003 11:34:15 -0800
To: <anne.gerodolle@voila.fr>, <www-smil@w3.org>
Message-ID: <ENEGINNFOHPGHPIICCFJMEFMDOAA.cogit@ludicrum.org>

You are getting the behavior you describe because you are using hyperlinks
to begin the items, instead of begin semantics on the animateTransforms. The
first time, this works fine, but then when you click again, rather than
beginning the animateTransform at the current time, it will seek back to the
time you began the first one, and then play forward from there. Since you
had later clicked on the second one, you have a resolved begin time for that
and so you see that again.  This is actually quite nice behavior in one
sense, but not what I take it you want ;-).

Try replacing the hyperlink activation with begin attributes that directly
tie to the rectangles and the click events.
Snipping a bit:
...
   <animateTransform id="anim_calend"  attributeName="transform"
attributeType="XML"
      type="transform" to="117,33" fill="freeze"
      begin="rect1.click" dur="0.10s" />
...
   <rect id="rect1" width="20" height="20" x="40" y="20" fill="yellow"/>

This covers common cases, but does not allow for accessible interaction (it
forces mouse click interaction, where <a> elements allow activation through
a variety of means like keyboard input, voice input, etc.). If you need
accessible behavior, you can keep your hyperlinks, but give them ID values,
use a dummy target (xlink:href) (so they do not really do anything when
activated) and then specify the animateTransform to use:

   ... begin="hyperlink1.activate"

Hope this helps -

Patrick

> -----Original Message-----
> From: www-smil-request@w3.org [mailto:www-smil-request@w3.org]On Behalf
> Of anne.gerodolle@voila.fr
> Sent: Wednesday, November 05, 2003 2:15 AM
> To: www-smil@w3.org
> Subject: newby : pb with SVG and SMIL
>
>
>
> Hello,
>
> I am trying to build a svg file (source is enclosed)at end of
> message) that should have the following behavior :
> if I click on one of the small rectangles, the circles move
> toward that rectangle, display a small animation then stay still.
> However I observe  (with adobe plug-in)  the following :
> The first time I click on the green rectangle, it's OK
> If then I click on the yellow rectangle it's OK
> But if I click (again) on the green one, it works well but after
> a second or so the other animation is fired too.
>
> Can please somebody explain me where my mistake lies ? I would
> like to describe the animation "anim1" only once in the svg
> file, do I have to duplicate the code ?
>
> please tell me also if I am not posting to the right forum,
>
> Anne
> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
> "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
> <svg
>   xmlns="http://www.w3.org/2000/svg"
>   xmlns:xlink="http://www.w3.org/1999/xlink"
>   >
>   <g
> 	 id="selection" transform="translate(47,33)"	>
> 	 <animateTransform id="anim_calend"
> attributeName="transform" attributeType="XML"
> 		type="transform" to="117,33" fill="freeze"
> begin="indefinite" dur="0.10s" />
> 	 <animateTransform id="anim_home" attributeName="transform"
> attributeType="XML"
> 		type="transform" to="47,33" fill="freeze"
> begin="indefinite" dur="0.10s" />
> 	 <g>
> 		<animateTransform id="anim1"
> attributeName="transform" attributeType="
> 		  XML"
> 		  type="scale" values="1,1;.9,.9;1,1;.5,.5;1,1"
> additive="sum" fill="freeze"
> begin="anim_calend.end;anim_home.end" dur="1s" />
> 		<ellipse
> 		  stroke="none" fill="#1e90ff"
> 		  cx="0" cy="0" rx="30" ry="30"/>
> 		<ellipse
> 		  stroke="none" fill="#0000ff"
> 		  cx="0" cy="0" rx="25" ry="25"/>
> 		<ellipse
> 		  stroke="none" fill="#86ceeb"
> 		  cx="0" cy="0" rx="18" ry="18"/>
> 	 </g>
>   </g>
>   <g>
> 	 <a xlink:href="#anim_home">
> 		<rect width="20" height="20" x="40" y="20" fill="yellow"/>
> 	 </a></g>
>   <g>
> 	 <a xlink:href="#anim_calend">
> 		<rect width="20" height="20" x="110" y="20" fill="green"/>
> 	 </a>
>   </g>
> </svg>
>
>
> ------------------------------------------
>
> Faites un voeu et puis Voila ! www.voila.fr
>
Received on Wednesday, 5 November 2003 14:36:45 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 7 December 2009 10:53:28 GMT