path property
Sets or retrieves a set of values that describe a path as a function of time.
Syntax
| JScript |
|---|
|
Property values
Type: String
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.
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 val 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.
Examples
This example demonstrates two ways to use the path attribute to animate a div along a square path.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/path.htm
<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>
See also
Reference
Conceptual