xmlgraphics-batik-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Cameron McCormack <cam-batik-...@aka.mcc.id.au>
Subject Re: Animated paths
Date Sun, 20 Jun 2004 02:32:40 GMT
Hi Piyush.

Piyush Rai:
> To animate the path, I am trying something like this
> but it shows an error message for the
> variable?segList:?"segList has no properties",
> although I have defined a path:

Try this, it should do what you want.

  <svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
  
    <path id="curve1" d="M 369 95 M 369 95L 371 95L 371
    96L 371 99L 368 106L 362 119L 354 132L 345 143L 335
    153L 321 164L 303 174L 285 180L 268 184L 251 184L 235
    183L 219 178L 202 167L 185 152L 168 134L 153
    115L 139 95L 127 76L 120 61L 116 48L 115 42L 115 40L
    115 39L 116 38L 120 34L 124 32L 131 28L 143 25L 156
    24L 167 24L 175 28L 186 37L 199 53L 213 71L 226 92L
    240 116L 251 137L 261 159L 269 178L 277 196L 287 217L
    296 235L 303 252L 312 269L 320 286L 330 300L 336 312L
    342 321L 346 327L 348 329" display="none"/>
  
    <path id="curve2" stroke-width="4" stroke="#00ffff" fill="none" d=""/>
  
    <script><![CDATA[
      var speed = 10;
      
      var segList1 = document.getElementById("curve1").pathSegList;
      var segList2 = document.getElementById("curve2").pathSegList;
      
      function animate() {
          setTimeout("advance()", speed);
      }
      
      function advance() {
          if (segList1.numberOfItems > 1) {
              segList2.appendItem(segList1.getItem(1));
              setTimeout("advance()", speed);
          }
      }
      
      animate();
    ]]></script>
  </svg>

Note that I put an extra M command at the start of the path data, since
when you insert a list item into another list, it gets removed from its
original list, and there needs to be a move command at the start of the
path to keep it valid.

> Also, is it okay to use "pathSegList" field instead of
> the method "getPathSegList"? 

Yes, in fact you should use pathSegList instead of getPathSegList.  (I
have a habit of looking up the SVG DOM Java interfaces in Batik, where
methods are used instead of properties.)

Cameron

-- 
Cameron McCormack
|  Web: http://mcc.id.au/
|  ICQ: 26955922

---------------------------------------------------------------------
To unsubscribe, e-mail: batik-dev-unsubscribe@xml.apache.org
For additional commands, e-mail: batik-dev-help@xml.apache.org


Mime
View raw message