view www/tests/windingNumber.svg @ 101:52e44ee1c791 tip master

enabled all scores in autostart script
author Rob Canning <rc@kiben.net>
date Tue, 21 Apr 2015 16:20:57 +0100
parents 49c94f63b8b0
children
line wrap: on
line source
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1"
   width="744.09448"
   height="1052.3622"
   id="svg6046" onload="setPathPoints()">


<script>

<![CDATA[

var xmlns="http://www.w3.org/2000/svg"

function setPathPoints()
{


  var Path = document.getElementById("windingPath") 
  var totalLength = Path.getTotalLength() 
  var number = 1000
  
  // Rubber Band  
  // starting point of moving cube
  var cubex = 154
  var cubey = 131

  var xstring = cubex + ';'
  var ystring = cubey + ';'

  for (var i=1; i <= number; i++) {    
     Point = Path.getPointAtLength(i/(number-1)*totalLength)
     xstring += (Point.x).toFixed(2)+";"
     ystring += (Point.y).toFixed(2)+";" 
  }
  x2Path= document.getElementById("x2Anim")
  y2Path= document.getElementById("y2Anim")

  x2Path.setAttributeNS(null,"values",xstring)
  y2Path.setAttributeNS(null,"values",ystring)
}




]]>

</script>

  <defs
     id="defs6048">
    <marker
       refX="0"
       refY="0"
       orient="auto"
       id="Arrow2Mend"
       style="overflow:visible">
      <path
         d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
         transform="scale(-0.6,-0.6)"
         id="path6658"
         style="font-size:12px;fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round" />
    </marker>
    <marker
       refX="0"
       refY="0"
       orient="auto"
       id="Arrow1Send"
       style="overflow:visible">
      <path
         d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
         transform="matrix(-0.2,0,0,-0.2,-1.2,0)"
         id="path6646"
         style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;marker-start:none" />
    </marker>
    <marker
       refX="0"
       refY="0"
       orient="auto"
       id="Arrow1Mend"
       style="overflow:visible">
      <path
         d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
         transform="matrix(-0.4,0,0,-0.4,-4,0)"
         id="path3664"
         style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;marker-start:none" />
    </marker>
    <marker
       refX="0"
       refY="0"
       orient="auto"
       id="Arrow1Lend"
       style="overflow:visible">
      <path
         d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
         transform="matrix(-0.8,0,0,-0.8,-10,0)"
         id="path3658"
         style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;marker-start:none" />
    </marker>
    <marker
       refX="0"
       refY="0"
       orient="auto"
       id="Arrow1Sstart"
       style="overflow:visible">
      <path
         d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
         transform="matrix(0.2,0,0,0.2,1.2,0)"
         id="path3667"
         style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;marker-start:none" />
    </marker>
    <marker
       refX="0"
       refY="0"
       orient="auto"
       id="TriangleInL"
       style="overflow:visible">
      <path
         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
         transform="scale(-0.8,-0.8)"
         id="path3789"
         style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;marker-start:none" />
    </marker>
    <marker
       refX="0"
       refY="0"
       orient="auto"
       id="DiamondLstart"
       style="overflow:visible">
      <path
         d="M 0,-7.0710768 -7.0710894,0 0,7.0710589 7.0710462,0 0,-7.0710768 z"
         transform="matrix(0.8,0,0,0.8,5.6,0)"
         id="path3744"
         style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;marker-start:none" />
    </marker>
    <marker
       refX="0"
       refY="0"
       orient="auto"
       id="EmptyDiamondLstart"
       style="overflow:visible">
      <path
         d="M 0,-7.0710768 -7.0710894,0 0,7.0710589 7.0710462,0 0,-7.0710768 z"
         transform="matrix(0.8,0,0,0.8,5.6,0)"
         id="path3771"
         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;marker-start:none" />
    </marker>
    <marker
       refX="0"
       refY="0"
       orient="auto"
       id="DotL"
       style="overflow:visible">
      <path
         d="m -2.5,-1 c 0,2.76 -2.24,5 -5,5 -2.76,0 -5,-2.24 -5,-5 0,-2.76 2.24,-5 5,-5 2.76,0 5,2.24 5,5 z"
         transform="matrix(0.8,0,0,0.8,5.92,0.8)"
         id="path3717"
         style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;marker-start:none;marker-end:none" />
    </marker>
    <marker
       refX="0"
       refY="0"
       orient="auto"
       id="Arrow2Mstart"
       style="overflow:visible">
      <path
         d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
         transform="scale(0.6,0.6)"
         id="path6802"
         style="font-size:12px;fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round" />
    </marker>
    <marker
       refX="0"
       refY="0"
       orient="auto"
       id="Arrow1Mstart"
       style="overflow:visible">
      <path
         d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
         transform="matrix(0.4,0,0,0.4,4,0)"
         id="path6784"
         style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;marker-start:none" />
    </marker>
    <marker
       refX="0"
       refY="0"
       orient="auto"
       id="Arrow2Lend"
       style="overflow:visible">
      <path
         d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
         transform="matrix(-1.1,0,0,-1.1,-1.1,0)"
         id="path6799"
         style="font-size:12px;fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round" />
    </marker>
    <marker
       refX="0"
       refY="0"
       orient="auto"
       id="Arrow2Lstart"
       style="overflow:visible">
      <path
         d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
         transform="matrix(1.1,0,0,1.1,1.1,0)"
         id="path6796"
         style="font-size:12px;fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round" />
    </marker>
    <marker
       refX="0"
       refY="0"
       orient="auto"
       id="Arrow1Lstart"
       style="overflow:visible">
      <path
         d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
         transform="matrix(0.8,0,0,0.8,10,0)"
         id="path6778"
         style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;marker-start:none" />
    </marker>
  </defs>
  <g
     id="layer1">
    <path
       d="m 154.46203,131.06993 c -44.07304,29.11266 -83.406887,72.16388 -90.427429,126.47186 -8.459742,45.79022 5.235707,93.2478 32.642856,130.28464 26.749493,38.20437 73.951283,69.24883 122.176133,57.20194 29.64157,-4.83382 53.48855,-29.36894 58.21519,-58.91422 9.68655,-54.23248 -3.95641,-109.0379 -15.75416,-161.82179 C 250.89268,188.87886 246.54287,150.48515 226.30947,118.86892 203.89231,83.124761 155.86541,71.776463 117.52129,85.845062 80.572179,97.171596 57.228526,131.86819 41.235584,164.97206 18.991947,213.51355 29.877982,267.64713 36.67951,318.2714 c 11.243825,54.15354 40.256075,106.36957 85.32275,139.4799 37.82295,28.97986 91.73004,33.62032 133.63718,10.82926 53.69337,-29.61671 97.53053,-78.52319 118.50148,-136.4418 23.46906,-65.85387 39.60888,-135.06426 39.33774,-205.29117 -1.48295,-22.85116 -0.69319,-52.896044 -22.67493,-66.502975 -22.08597,-6.446167 -39.75477,14.561279 -52.3007,29.806077 -39.08704,53.856518 -58.89246,124.227968 -45.73811,190.185728 6.58963,36.76838 30.92221,67.93933 62.28015,87.3168 28.19917,19.30659 69.30933,18.14349 93.54299,-7.33781 46.76026,-46.63755 45.18229,-128.17439 4.30914,-178.07475 -28.37355,-31.97369 -63.34676,-58.97818 -102.63554,-76.19309 -66.4964,-26.83024 -137.6278,-15.008426 -195.79963,25.02236 z"
       id="windingPath"
       style="fill:none;stroke:#00ff00;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-start:none;marker-mid:url(#Arrow2Mend);marker-end:none" />
    <rect
       width="8"
       height="8"
       x="-4"
       y="-4"
       id="rect5896"
       style="fill:#008400;fill-opacity:1;stroke:#00ff00;stroke-opacity:1" >
       <animateMotion id="pathMotion" dur="10s" repeatCount="1" rotate="auto" fill="freeze">
         <mpath xlink:href="#windingPath" />
       </animateMotion>
       <animateTransform id="transformRect" attributeName="transform" type="scale"     				keyTimes="0;0.2;0.4;0.6;0.8;1" 						values="1.0;2;4;4;2;1.0" 							dur="10s" additive="replace" fill="freeze" 				repeatCount="1"/> 
    </rect>
  </g>
  <!-- point circle for rubber band -->
  <path
     d="m 187.60967,283.00491 a 14.188966,14.188966 0 1 1 -28.37794,0 14.188966,14.188966 0 1 1 28.37794,0 z"
     transform="matrix(0.46966991,0,0,0.46966991,84.44538,142.56119)"
     id="path9854"
     style="fill:#000080;fill-opacity:1;stroke:none" />
  <text
     x="138.21458"
     y="284.54355"
     id="text9856"
     xml:space="preserve"
     style="font-size:18.57689476px;font-style:normal;font-weight:normal;fill:#000000;fill-opacity:1;stroke:none;font-family:Bitstream Vera Sans"><tspan
       x="138.21458"
       y="284.54355"
       id="tspan9858">P</tspan></text>

   <line id="myLine" x1="165" y1="275" x2="154.46203" 
         y2="131.06993" stroke="black" stroke-width="3">  
   <animate id="x2Anim" attributeName = "x2" dur="10s" />
   <animate id="y2Anim" attributeName = "y2" dur="10s" />
   </line>

</svg>