Files used

Right-click, save ...

• path_animation.shtml
• path_animation.svg
• path_animation.js

Technical Details

In order to use the airplane (possibly also several times) we define it as a "<symbol>"-element (as described at the Using cartographic symbols example) and instantiate it for later use. To define the flight-path we use a cubic Bézier curve.

<g id="AnimationPaths">
  <path id="Zuerich_Geneva" stroke="orange" stroke-width="2000" fill="none"
             d="M682500,53500 C632500,53500 549500,80000 499500,181000" />
  <use id="AirplaneZurichGeneva" xlink:href="#airplane">
              <animateMotion id="animMotionZurGen" dur="&animDuration;"
              repeatCount="indefinite" rotate="auto-reverse">
      <mpath xlink:href="#Zuerich_Geneva"/>
    </animateMotion>
    <animateTransform attributeName="transform" 
              type="scale" keyTimes="0;0.2;0.8;1" values="1.5;4;4;1.5"
              dur="&animDuration;" additive="replace" fill="freeze"
        repeatCount="indefinite"/>
  </use>
</g>

The above construct contains the whole animateMotion-element (animation along a path) and the transform/scale animation for the scaling at takeoff and landing of the plane. First, we have to define the Bézier curve within the path-element. This is done in the second line, starting at Zurich, having a Bézier handle/tangent in the west of Zurich, the second handle in the north-east of Geneva and the end-point at Geneva. This path-element is both, a visible geometry, but also referenced in the mpath-element to define the geometry where the animated element has to move along).

Next, we have a reference to the airplane-symbol (line 3) and include the animateMotion-element. The attributes include the duration of the animation (dur-attribute), the number of loops/repeats (repeatCount-attribute) and the type of rotation as the object moves along the path (rotate-attribute). To define the duration we use an entity-definition of 10 seconds at the header of the file (<!ENTITY animDuration "10s">), because the same constant is used several times in our example. The repeatCount-attribute is defined to loop indefinitely and the rotate-attribute tells the object to auto-rotate according to the path-segment's orientation. As child-element we have the mpath-element which contains the link to the Bézier curve defined above, as an attribute.

You may also consider to use the keyPoints-attribute that helps you to meet certain distances along the path at a certain time, relative to the whole animation. The keyPoints-attribute works in conjunction with the keyTimes-attribute. Another attribute of the animateMotion-element, the calcmode-attribute, helps you to define acceleration/velocity modes. Possible values include discrete (no path animation, but immediate jumps to different locations), linear (may result in segments of different velocity, when used with path-elements with more than two vertices), paced (this is the default value, helps to keep a constant velocity; time is divided evenly according to the distance described by each segment) and spline (gives complete velocity control in conjunction with keyTimes-attribute and keySplines-attribute).

The animation that scales the airplane is defined the last animateTransform-tag. All transform parameters (scale, skew, translate, rotate) may be animated. You may find the keyTimes and values attributes very useful where you can set certain points in time (relative to the whole animation cycle specified with the dur attribute) and their corresponding states/values.

<text id="labelZurich" x="687000" y="50000">Zurich
  <animate attributeName="opacity"
          keyTimes="0;0.15;0.3;1" values="1;1;0;0"
          dur="&animDuration;" repeatCount="indefinite" />
</text>

The above lines define an opacity animation with the help of keyTimes and values.

If you want to add additional swiss cities, use 302000 - y coordinate (swiss coordinate system) for the position along the y-axis.

Further resources on SVG animation:

• www.w3.org/TR/2001/REC-smil-animation-20010904/
• www.w3.org/TR/SVG/animate.html
• https://www.kevlindev.com/tutorials/basics/animation/svg_smil/