You are viewing a plain text version of this content. The canonical link for it is here.
Posted to batik-dev@xmlgraphics.apache.org by Piyush Rai <ra...@yahoo.com> on 2004/06/18 18:03:10 UTC
Animated paths
Hi,
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 :-(
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?
Thanks in advance.
--Piyush.
---------------------------------
Do you Yahoo!?
Read only the mail you want - Yahoo! Mail SpamGuard.
Re: Animated paths
Posted by Cameron McCormack <ca...@aka.mcc.id.au>.
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
Re: Animated paths
Posted by Piyush Rai <ra...@yahoo.com>.
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 <ca...@aka.mcc.id.au> 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:
batik-dev-unsubscribe@xml.apache.org
For additional commands, e-mail:
batik-dev-help@xml.apache.org
__________________________________
Do you Yahoo!?
Read only the mail you want - Yahoo! Mail SpamGuard.
http://promotions.yahoo.com/new_mail
---------------------------------------------------------------------
To unsubscribe, e-mail: batik-dev-unsubscribe@xml.apache.org
For additional commands, e-mail: batik-dev-help@xml.apache.org
Re: Animated paths
Posted by Cameron McCormack <ca...@aka.mcc.id.au>.
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: batik-dev-unsubscribe@xml.apache.org
For additional commands, e-mail: batik-dev-help@xml.apache.org