Here are two more examples of using the animate command:
<path id="france" style="stroke-dasharray: 26405 26405;stroke-dashoffset:26405" d="M-1748 4854c208,-29 217,-721 281,-694 ... <animate attributeName="stroke-dashoffset" from="26405" to="0" dur="10s" begin="crcl.click"/> <set attributeType="CSS" attributeName="fill" to="blue" begin="crcl.click+12s" /> </path>
If you have a very long path it is possible to determine the length of the path. In this case it is 26405 units long. You can either do this by using Javascript and hoping that the browser gives you the correct answer or you can calculate it yourself. You then define a dashed line so that the outline of France is the first dash followed by a gap of the same length. The trick is then to define an offset of 26405 as well so that what you now see is nothing as all you have is the gap. Animating the offset then looks as though you are drawing the outline of France.
The same trick can be applied to text. You start by drawing some text along a path. Then you set the text offset so nothing is visible and then animate the offset and the text appears. Have the text sitting on a curve with tspan elements making the text a bit more interesting and you have an innovative animation.
<animate attributeName="startOffset" from="0%" to="99%" begin="0s" dur="6s" />