PATH Attribute | path Property

  • Article

This topic documents a feature of HTML+TIME 2.0, which is obsolete as of Windows Internet Explorer 9.

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

Syntax

HTML <t:ANIMATEMOTION PATH = vPath... >
Scripting [ vPath = ] t:ANIMATEMOTION.path [ = 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 apply only to the definition of the path itself, and not to the animation using the path. Absolute commands must specify the coordinate system of the path values; relative commands 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 moveto commands, M or m. This establishes a starting point, even if it is just "M 0 0" or "m 0 0", which doesn't move the element.

When a path is combined with linear or spline  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 moveto command does not count as an additional point for keyTimes and keySplines, and should not define an additional segment for timing or interpolation. When a path is combined with a paced  calcMode setting, all moveto commands are considered to have zero length; that is, they always happen instantaneously, and should not be considered in computing the pacing.

The vPath string cannot include any of the following Cascading Style Sheets (CSS) length unit designators: in, cm, mm, pt, pc, em, ex, px, or %. If any of these designators is specified, no animation will occur.

When writing script to dynamically change the properties of an active animation, results might be unpredictable or undefined. Restart the animation with beginElement after you change the properties. The following example shows how to use beginElement.

<SCRIPT>
object.endElement();
object.path="M 0 0 L 100 100";
object.beginElement();
</SCRIPT>

The following example uses script to change an active animation from a path to a values list.

<SCRIPT>
object.endElement();
object.path=null;
object.values="100,100;0,0";
object.beginElement();
</SCRIPT>

For the animate object, the animateMotion object, and the animateColor object, the time2 behavior uses the following model to evaluate which properties to animate.

  • The path property overrides any setting for the values property, the from property, the to property, or the by property.
  • The values property, if specified, overrides any setting for the from property, the to property, or the by property.
  • The from property is used, unless the values property or the path property is 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>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/path.htm

Applies To

t:ANIMATEMOTION

See Also

Introduction to HTML+TIME, keySplines, keyTimes