KoXo 자바스크립트 - 속성(property) - path

시간 기능으로서의 경로를 기술하는 값들의 세트(set)를 반환하거나 설정한다.

인수

: (속성 문자열): 속성값은 시간 기능으로서의 경로를 기술하는 값들의 세트(set)를 나타내는 다음 중 하나의 문자열이다.
이 값들은 경로를 기술하는 명령문들과 값들로 구성된다. 여기서 사용될 수 있는 속성은 SVG(Scalable Vector Graphics) 경로 문법의 하부세트이다.
경로는 절대(absolute)경로와 상대(relative)경로를 지원하며, 애니메이선의 경로가 아니라 경로 자체의 정의에만 사용된다.
절대경로는 경로값을 표시하는 양식에 따르며
상대경로는 단순히 현재의 위치에서 상대적인 위치를 정의한다.

다음과 같은 속성 명령들이 적용될 수 있다.

명령		명령 의미	설명
m	상대	이동 Move To	주어진 x,y 좌표에 새로운 하부 경로를 시작한다. 만일 moveto가 여러 좌표들의 짝들이면 후속 짝들이 명시적인 "Line To" 명령들로 취급된다.
M	절대	이동 Move To
l	상대	라인으로 Line To	현재의 위치에서부터 지정된 x,y 좌표로 줄을 긋는다. 이 좌표가 새로운 현재 위치가 된다. 어러개의 좌표를 지정하여 다각형을 만들 수 있다.
L	절대	라인으로 Line To
h	상대	수평라인으로 Horizontal Line To	현재위치 좌표(cpx,cpy)에서 (x,cpy) 좌표까지 줄을 긋는다. 여러 값들이 제공될 수 있다.
H	절대	수평라인으로 Horizontal Line To	현재위치 좌표(cpx,cpy)에서 (x,cpy) 좌표까지 줄을 긋는다.
v	상대	수직라인으로 Vertical Line To	현재위치 좌표(cpx,cpy)에서 (cpx,y) 좌표까지 줄을 긋는다. 여러 값들이 제공될 수 있다.
V	절대	수직라인으로 Vertical Line To	현재위치 좌표(cpx,cpy)에서 (cpx,y) 좌표까지 줄을 긋는다.
z	상대	자동 닫기 Closepath	애니메이션 자동으로 직선 라인을 현재 위치에서 현재 하부 경로의 처음 위치로 연결하여 닫는다.
Z	절대	자동 닫기 Closepath	애니메이션 자동으로 직선 라인을 현재 위치에서 현재 하부 경로의 처음 위치로 연결하여 닫는다.
c	상대	Bezier 곡선 그리기 Cubic Bezier Curve To	cubic Bezier curve을 현재 위치 x,y 좌표에서 제어 위치 좌표 x1,y1을 사용하여 곡선을 사작하고, 제어 위치 좌표 x2,y2로 곡선을 닫는다. 복수 곡선을 위하여 여러개의 좌표들을 제공할 수 있다.
C	절대	Bezier 곡선 그리기 Cubic Bezier Curve To

이 속성은 읽기/쓰기이며 디폴트값은 없다.

특기

유효한 경로는 M이나 m 중 하나의 move to 명령으로 시작하여야 한다.
"M 0 0"나 "m 0 0" 명령으로 엘레멘트가 이동하지 않지만 이는 시작점을 제공한다.

경로가 calcMode의 linear나 spline로 복합되어 설정되어 있으면, move to 명령이 경로 속에 있지 않는 한, 값들은 경로에 의하여 지정되는 점들의 갯수로 정의된다. move to 명령이 keyTimes와 keySplines의 목적으로 추가적인 점이 되지 않으며, 시간 마춤과 삽입 장식을 위하여 추가적인 세그멘트를 정의하지 않아야 한다. 경로가 calcMode 설정에서 paced와 조합되면, 모든 move to 명령들은 길이가 없는 것으로(0 length: 항상 순간적으로 발생됨) 간주되며, 간격을 계산하지 않는다.

속성값 Val 문자열에는 CSS 길이 단위 약자를 포함할 수 없다. 만일 어떤 약자(in,cm,mm,pt,pc,em,ex,px,%)가 기술되면 애니메이션이 일어나지 않는다.

활성 애니메이션의 속성을 탄력적으로 변경시키는 스크립트를 작성할 때 주의할 사항이 있다. 속성값들을 변경하고 beginElement로 애니메이션을 새로 시작할 때 원하는 결과를 얻지 못할 수 있기 때문이다. 예를들어

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

스크립트를 통하여 여러 경로에 활성 애니메이션을 변경시킨다.

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

t:ANIMATE, animateMotion과 animateColor 개체들에서, HTML time2 비헤비어는 어느 속성을 애니메니션할 것인가를 결정하는데 다음과 같은 모델을 사용한다.

path 속성은 values, from, to 혹은 by 속성들에 설정된 값들을 덮어씌운다.
values 속성이 지정되면, from, to 혹은 by 속성들에 설정된 값을 덮어씌운다.
values 혹은 path 속성들이 지정되어 있지 않는 한 from 속성이 사용된다.
to 속성이 지정되면, by 속성으로 설정된 값을 덮어씌운다.
by 속성은 다른 어떤 속성도 덮어씌우지 않는다.

적용

개체	script	HTML	규격	IE

참조

HTML+time, keySplines, keyTimes

이 속성은 (영문)SMIL 2.0(Synchronized Multimedia Integration Language)에서 정의되었다.