Wednesday, November 12, 2008

Link and animation

We discuss here about links from a SVG page to another page.

Une version française de cet article se trouve à

The basic method is to surround a set of graphics primitives by <a ...>, a similar tag to html tag <a ...>. This allows for example to move from one page to another on a click on any part of the group by the primitive surrounded by <a>.

But, we would like to go further: a click on an element triggers an animation and, at the end of this animation, we go to another SVG page.

There is no simple way to do that.

Combined with the animated element which has the 'anim1' id, I'll add the following:
<ev:listener target='anim1' event='endEvent' handler='#toOtherSVG' />

So when the endEvent will be generated for the animation, the handler named 'toOtherSVG' will be executed.

The handler can be defined as follows:
<handler xml:id='toOtherSVG' type="application/ecmascript">
gotoLocation ( 'otherPage.svg');
</ handler>

There is potentially another method that would be feasible in the future. It is syntactically correct, but its operation is not specified by the current standard (even in the draft Tiny 1.2). As a result, SVG viewers may have a different behavior.

Suppose we have the following line
<ev:listener event="'endEvent'" handler="'#toOtherSVG'">

as before. But the element with id 'toOtherSVG', is not a classic handler but:
<a id="'toOtherSVG'" href="'otherPage.svg'">
This syntax is correct in SVG Tiny 1.2, but the behavior of the tag <a> as a target of the event is not defined. It would suffice to establish that if <a> tag is the target of an event, we follow the link defined by the tag.

Perhaps for a coming release of the SVG specification?

No comments: