PATH Attribute | path Property

Sets or retrieves a set of values that describe a path as a function of time.

Syntax

HTML <t:ANIMATEMOTION PATH = vPath... >
Scripting t:ANIMATEMOTION.path(val) [ = vPath ]

HTML	<t:ANIMATEMOTION PATH = vPath... >
Scripting	t:ANIMATEMOTION.path(val) [ = vPath ]

Possible Values

vPath String that specifies or receives a set of commands and values that describe a path. The values supported for this property are a subset of the Scalable Vector Graphics (SVG) path syntax. Two forms of the path commands are supported, absolute and relative. Note that these terms only apply to the definition of the path itself, rather than the animation using the path. Absolute commands must specify the coordinate system of the path values, whereas relative commands simply define the point as an offset from the current point. The following commands are supported:
m Relative "Move To" command. Starts a new subpath at the given x,y coordinate. If a moveto is followed by multiple pairs of coordinates, the subsequent pairs are treated as implicit "Line To" commands.
M Absolute "Move To" command. Starts a new subpath at the given x,y coordinate. If a moveto is followed by multiple pairs of coordinates, the subsequent pairs are treated as implicit "Line To" commands.
l Relative "Line To" command. Draws a line from the current point to the given x,y coordinate, which becomes the new current point. A number of coordinate pairs can be specified to draw a polyline.
L Absolute "Line To" command. Draws a line from the current point to the given x,y coordinate, which becomes the new current point. A number of coordinate pairs can be specified to draw a polyline.
h Relative "Horizontal Line To" command. Draws a line from the current point (cpx, cpy) to (x, cpy). Multiple values can be provided.
H Absolute "Horizontal Line To" command. Draws a line from the current point (cpx, cpy) to (x, cpy).
v Relative "Vertical Line To" command. Draws a line from the current point (cpx, cpy) to (cpx, y). Multiple values can be provided.
V Absolute "Vertical Line To" command. Draws a line from the current point (cpx, cpy) to (cpx, y).
z Relative "Closepath" command. Causes an automatic straight line to be drawn from the current point to the initial point of the current subpath.
Z Absolute "Closepath" command. Causes an automatic straight line to be drawn from the current point to the initial point of the current subpath.
c Relative "Cubic Bezier Curve To" command. Draws a cubic Bezier curve from the current point to (x,y) using (x1,y1) as the control point at the beginning of the curve and (x2,y2) as the control point at the end of the curve. Multiple sets of coordinates can be specified to draw a polybezier.
C Absolute "Cubic Bezier Curve To" command. Draws a cubic Bezier curve from the current point to (x,y) using (x1,y1) as the control point at the beginning of the curve and (x2,y2) as the control point at the end of the curve. Multiple sets of coordinates can be specified to draw a polybezier.
The property is read/write. The property has no default value.

Remarks

Valid paths must begin with one of the two move to commands, M or m. This establishes a starting point, even if it is just "M 0 0" or "m 0 0", which don't move the element.
When a path is combined with linear or spline?A HREF="../../time2/properties/calcmode.html">calcMode settings, the number of values is defined to be the number of points defined by the path, unless there are move to commands within the path. A move to command does not count as an additional point for the purpose of keyTimes and keySplines, and should not define an additional segment for the purposes of timing or interpolation. When a path is combined with a paced?B>calcMode setting, all move to commands are considered to have 0 length (that is, they always happen instantaneously), and should not be considered in computing the pacing.
The vPath string cannot include any Cascading Style Sheets (CSS) length unit abbreviations. If any of these (in,cm,mm,pt,pc,em,ex,px,%) are specified, no animation will occur.
When writing script to dynamically change the properties of an active animation, developers should consider a couple of issues. Because results might be unpredictable or undefined when you change the properties of an active animation, restart the animation with beginElement after you have made the change. For example:
<SCRIPT>
object.endElement();
object.path="M 0 0 L 100 100";
object.beginElement();
</SCRIPT>
To change an active animation from a path to a values list through script:
<SCRIPT>
object.endElement();
object.path=null;
object.values="100,100;0,0";
object.beginElement();
</SCRIPT>
For the animate, animateMotion, and animateColor objects, the time2 behavior uses the following model to evaluate which properties to animate.
The path property overrides any setting for the values, from, to, or by properties.
The values property, if specified, overrides any setting for the from, to, or by properties.
The from property is used unless the values or path properties are specified.
The to property, if specified, overrides any setting for the by property.
The by property doesn't override any properties.

Example

This example demonstrates two ways to use the path attribute to animate a div along a square path.

<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<TITLE>path Property</TITLE>
<STYLE>
.time { behavior: url(#default#time2) }
</STYLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY TOPMARGIN=0 LEFTMARGIN=0 BGPROPERTIES="fixed" BGCOLOR="#FFFFFF"
LINK="#000000" VLINK="#808080" ALINK="#000000">
<DIV ID="oDIV" CLASS="time"
STYLE="position:absolute;top:50px;left:50px;height:100px;width:150px;
background-color:yellow;text-align:center;font-color:black;
font-size:large;border:solid black 1px;">How to use the
<B>path</B> attribute.
</DIV>
<t:ANIMATEMOTION targetElement="oDIV" begin="b1.click"
path="M 0 0 L 100 0 v 100 h -100 V 0" dur="3" />
<DIV ID="oDIV2" CLASS="time"
STYLE="position:absolute;top:50px;left:250px;height:100px;width:150px;
background-color:yellow;text-align:center;font-color:black;
font-size:large;border:solid black 1px;">Another way how
to use the <B>path</B> attribute.
</DIV>
<t:ANIMATEMOTION targetElement="oDIV2" begin="b1.click"
path="m 0 0 L 100 0  100 100 0 100 z" dur="3" />
<BUTTON id="b1" style="position:absolute;top:275px;left:125px;">
Click to begin / restart
</BUTTON>
</BODY>
</HTML>

This feature requires Microsoft?Internet Explorer 5.5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Standards Information

This property is defined in Synchronized Multimedia Integration Language (SMIL) 2.0 .

Applies To

t:ANIMATEMOTION