SpaceTraffic

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="Init(evt)">

   <title>Animated Values Test</title>

   <desc>

      Click on a shape, and the other shape will move to its animated value.

      Written by Doug Schepers [doug@schepers.cc], January 2004.

   </desc>

<script><![CDATA[

   var SVGDocument = null;

   var SVGRoot = null;

   var planetPeru = null;

   var planetCornflowerblue = null;

   var planetTomato = null;

   var planetBurlywood = null;

   var flightPath = null;

   function Init(evt)

   {

      SVGDocument = evt.target.ownerDocument;

      SVGRoot = SVGDocument.documentElement;

      planetPeru = SVGDocument.getElementById('planetPeru');

      planetCornflowerblue = SVGDocument.getElementById('planetCornflowerblue');

      planetTomato = SVGDocument.getElementById('planetTomato');

      planetBurlywood = SVGDocument.getElementById('planetBurlywood');

      flightPath = SVGDocument.getElementById('flightPath');

      //window.setTimeout('SetEndpoint()', 20)

   }

   function SetEndpoint(evt)

   {

      var matrixPeru = planetPeru.getCTM();

      var matrixCornflowerblue = planetCornflowerblue.getCTM();

      var matrixTomato = planetTomato.getCTM();

      var matrixBurlywood = planetBurlywood.getCTM();

      var newPoints = matrixPeru.e + ',' + matrixPeru.f

      newPoints += ' ' + matrixCornflowerblue.e + ',' + matrixCornflowerblue.f;

      newPoints += ' ' + matrixTomato.e + ',' + matrixTomato.f;

      newPoints += ' ' + matrixBurlywood.e + ',' + matrixBurlywood.f;

      flightPath.setAttributeNS(null, 'points', newPoints);

      window.setTimeout('SetEndpoint()', 20);

   }

]]></script>

   <defs>

      <radialGradient id="gradientGhostwhite" cx="48%" cy="30%" fx="54%" fy="32%" r="74%" gradientUnits="objectBoundingBox" spreadMethod="pad">

      <stop id="radial0-Stop1" offset="0%" style="stop-color:ghostwhite; stop-opacity:0.3;"/>

      <stop id="radial0-Stop2" offset="100%" style="stop-color:black; stop-opacity:0;"/>

      </radialGradient>

   </defs>

   <rect x="0" y="0" width="100%" height="100%" style="fill:black; "/>

   <path id="nebulaGhostwhite" fill="url(#gradientGhostwhite)" d="M720,0 H520 C450,490 275,350 220,330 S210,440 475,500 S524,600 875,690 S798,432 720,0"/>

   <circle id="sunGold" cx="250" cy="250" r="10" fill="gold"/>

    <path id="orbitPeru" d="M250,283 A33,33 0 1 1 251,283 z" fill="none" stroke="peru"/>

    <path id="orbitCornflowerblue" d="M250,320 A80,70 20 1 1 251,320 z" fill="none" stroke="cornflowerblue"/>

    <path id="orbitTomato" d="M250,350 A100,120 0 1 1 251,350 z" fill="none" stroke="tomato"/>

    <path id="orbitBurlywood" d="M230,380 A130,150 50 1 1 231,380 z" fill="none" stroke="burlywood"/>

   <!--<polyline id="flightPath" points="278.65179443359375,267.1402893066406 287.6238098144531,311.1416015625 341.5194396972656,279.6657409667969 258.54888916015625,103.27886962890625" style="stroke:green; fill:none; "/>

-->

   <circle id="planetPeru" cx="0" cy="0" r="3" fill="peru" onclick="SetEndpoint(evt)">

      <animateMotion dur="12s" repeatCount="indefinite" rotate="auto">

         <mpath xlink:href="#orbitPeru"/>

      </animateMotion>

   </circle>

   <circle id="planetCornflowerblue" cx="0" cy="0" r="6" fill="cornflowerblue">

      <animateMotion dur="24s" repeatCount="indefinite" rotate="auto">

         <mpath xlink:href="#orbitCornflowerblue"/>

      </animateMotion>

   </circle>

   <circle id="planetTomato" cx="0" cy="0" r="8" fill="tomato" onclick="SetEndpoint(evt)">

      <animateMotion dur="45s" repeatCount="indefinite" rotate="auto">

         <mpath xlink:href="#orbitTomato"/>

      </animateMotion>

   </circle>

   <circle id="planetBurlywood" cx="0" cy="0" r="5" fill="burlywood" onclick="SetEndpoint(evt)">

      <animateMotion dur="5s" repeatCount="indefinite" rotate="auto">

         <mpath xlink:href="#orbitBurlywood"/>

      </animateMotion>

   </circle>

</svg>