Движение на карте

В данном примере анимируются (animateMotion) прямоугольники (rect) на фоне карты (растровой картинки). Траектории заданы ломаными прямыми (path). Изображения прямоугольников поворачиваются сообразно с траекторией (rotate="auto").

SVG-код:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="444"
   xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Движение по карте</title>
<image xlink:href="map.jpg" x="0" y="0" width="500" height="444"/>
<rect x="0" y="0" width="12" height="7" fill="#ff0000">
   <animateMotion path="M50 20 L190 255 310 275 365 50 470 80 50 20"
      rotate="auto" repeatCount="indefinite" dur="15s"/>
</rect>
<rect x="0" y="0" width="12" height="7" fill="#0000ff">
   <animateMotion path="M150 500 L195 260 305 280 340 170 140 180 200 270 150 500"
      rotate="auto" repeatCount="indefinite" dur="12s"/>
</rect>
<rect x="0" y="0" width="12" height="7" fill="#00ff00">
   <animateMotion path="M150 500 L195 260 305 280 340 170 140 180 200 270 150 500"
      rotate="auto" repeatCount="indefinite" dur="20s"/>
</rect>
</svg>