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: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]
