Hi Cameron,
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:
<path id="curve" style="stroke-width:4;
stroke:#00ffff; fill:none" d="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"/>
Given below is the JavaScript code. Please tell me
what corrections do I need to make show the animations
correctly.
<script type="text/ecmascript"
a3:scriptImplementation="Adobe"><![CDATA[
var curve;
var segList;
var speed = 1;
var i=0;
var str = "";
function animate(evt) {
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
curve =
svgDocument.getElementById("curve");
segList = curve.pathSegList;
setTimeout("advance()", speed);
}
function advance() {
if(i<segList.numberOfItems)
{
str +=segList.getItem(i);//I am not sure
whether I can concatenate strings like this, correct
me if I am wrong.
curve.setAttribute("d", str);
setTimeout("advance()", speed);
i++;//advance to next item in the list
}
}
Also, is it okay to use "pathSegList" field instead of
the method "getPathSegList"?
Regards,
--Piyush.
Cameron McCormack <[EMAIL PROTECTED]> wrote:
Hi Piyush.
Piyush Rai:
> My problems is:
> Given an arbitrary SVG file containing several path
elements, I need
> to show all these paths in the order in which they
appear in the file.
> However, the paths need to be shown in an
incremental manner(they
> should appear to be "moving", as they are drawn). I
guess, I'll
> have to access the coordinates from path data "d"
somehow and show
> one point at a time using a function like
"setTimeout("advance()",
> delay)".
>
> Someone please tell me whether there are some
functions which allow
> me to access path data(and manipulate it)? Going
through the DOM
> documentation would really be troublesome :-(
Yes. If you have a reference to an SVGPathElement you
can call the
method getPathSegList which will return you an
SVGPathSegList object.
See
http://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathSegList
.
> Also, since there are more than one paths in the SVG
file, how can I
> get the list of all these paths so that I can show
them one by one in
> in the batik viewer using the above method?
You could use document.getElementsByTagNameNS(svgns,
"path") which will
return a NodeList object of all the path elements in
the document, in
document order.
Cameron
--
Cameron McCormack
| Web: http://mcc.id.au/
| ICQ: 26955922
---------------------------------------------------------------------
To unsubscribe, e-mail:
[EMAIL PROTECTED]
For additional commands, e-mail:
[EMAIL PROTECTED]
__________________________________
Do you Yahoo!?
Read only the mail you want - Yahoo! Mail SpamGuard.
http://promotions.yahoo.com/new_mail
---------------------------------------------------------------------
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
