요소가 따라가야할 모션 경로를 지정하고 부모 컨테이너 또는 SVG 좌표 시스템 내에서 요소의 위치를 정의한다.
offset-path
속성에 사용되는 타입이다.
path()
함수를 제외한 다른 값 유형은 아직 대부분 동작하지 않는다. 유저 에이전트(user agent) 지원 여부를 확인해야 한다.
none | path() | <url> | [ <basic-shape> || <geometry-box> ]
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
clip-path
, shape-outside
, offset-path
속성에 사용되는 형태를 나타낸다.
inset() | rect() | circle() | ellipse() | polygon() | path()
모든 함수를 표시하지 않을 수도 있다.
모든 속성을 표시하지 않을 수도 있다.
요소의 클리핑 범위를 설정한다.
인접 인라인 콘텐츠를 형태에 따라 감싸는 처리를 한다.
<basic-shape>
과 함께 지정하면 <basic-shape>
에 대한 참조 박스를 제공한다.
자체적으로 지정된 경우 모서리 모양을 포함하여 지정된 박스의 가장자리를 클리핑 경로로 사용한다.
<shape-box> | fill-box | stroke-box | view-box
CSS 박스 모델에서 박스의 가장자리를 참조하는 키워드를 쉐입(shape)에게 사용하는 경우를 나타낸다.
<box> | margin-box
테두리가 있다면 테두리 영역까지의 범위를 정의한다. SVG 컨텍스트에서는 stroke-box
와 동일한 값으로 사용된다.
실제로 콘텐츠가 보여지는 범위를 정의한다. SVG 컨텍스트에서는 fill-box
와 동일한 값으로 사용된다.
바깥쪽 여백 가장자리까지의 범위를 정의한다. SVG 컨텍스트에서는 stroke-box
와 동일한 값으로 사용된다.
내부 여백이 있다면 테두리를 뺀 내부 여백 포함을 나타내는 범위를 정의한다. SVG 컨텍스트에서는 fill-box
와 동일한 값으로 사용된다.
오브젝트 바운딩 박스(object bounding box)를 참조 박스로 사용한다. 웹브라우저에 따라서 SVG 컨텍스트에서만 적용될 수도 있다.
스트로크 바운딩 박스(stroke bounding box)를 참조 박스로 사용한다. 웹브라우저에 따라서 SVG 컨텍스트에서만 적용될 수도 있다.
가장 가까운 SVG 뷰포트를 참조 박스로 사용한다.
오브젝트 바운딩 박스(object bounding box)를 참조 박스로 사용한다. 웹브라우저에 따라서 SVG 컨텍스트에서만 적용될 수도 있다.
스트로크 바운딩 박스(stroke bounding box)를 참조 박스로 사용한다. 웹브라우저에 따라서 SVG 컨텍스트에서만 적용될 수도 있다.
가장 가까운 SVG 뷰포트를 참조 박스로 사용한다.
이미지나 글꼴 등 리소스를 가리키는 문자열을 나타낸다.
<url()> | <src()>
src()
함수의 매개변수를 나타낸다.
src( <string> <url-modifier>* )
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
모든 속성을 표시하지 않을 수도 있다.
글꼴을 지정한다.
가상 요소로 생성할 콘텐츠를 설정한다.
인용 부호의 유형을 설정한다.
URL의 의미나 해석을 어떻게든 변경하는 타입이다.
url() 함수의 매개변수를 나타낸다.
url( <string> <url-modifier>* ) | <url-token>
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
URL의 의미나 해석을 어떻게든 변경하는 타입이다.
모든 함수를 표시하지 않을 수도 있다.
모든 속성을 표시하지 않을 수도 있다.
선택자를 갖는 요소에 배경 이미지를 설정한다.
요소의 클리핑 범위를 설정한다.
모든 함수를 표시하지 않을 수도 있다.
다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.
어떠한 값도 설정하지 않음을 나타낸다.
다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.
테두리가 있다면 테두리 영역까지의 범위를 정의한다. SVG 컨텍스트에서는 stroke-box
와 동일한 값으로 사용된다.
실제로 콘텐츠가 보여지는 범위를 정의한다. SVG 컨텍스트에서는 fill-box
와 동일한 값으로 사용된다.
바깥쪽 여백 가장자리까지의 범위를 정의한다. SVG 컨텍스트에서는 stroke-box
와 동일한 값으로 사용된다.
내부 여백이 있다면 테두리를 뺀 내부 여백 포함을 나타내는 범위를 정의한다. SVG 컨텍스트에서는 fill-box
와 동일한 값으로 사용된다.
오브젝트 바운딩 박스(object bounding box)를 참조 박스로 사용한다. 웹브라우저에 따라서 SVG 컨텍스트에서만 적용될 수도 있다.
스트로크 바운딩 박스(stroke bounding box)를 참조 박스로 사용한다. 웹브라우저에 따라서 SVG 컨텍스트에서만 적용될 수도 있다.
가장 가까운 SVG 뷰포트를 참조 박스로 사용한다.
오브젝트 바운딩 박스(object bounding box)를 참조 박스로 사용한다. 웹브라우저에 따라서 SVG 컨텍스트에서만 적용될 수도 있다.
스트로크 바운딩 박스(stroke bounding box)를 참조 박스로 사용한다. 웹브라우저에 따라서 SVG 컨텍스트에서만 적용될 수도 있다.
가장 가까운 SVG 뷰포트를 참조 박스로 사용한다.
CSS에서 사용할 외부 리소스를 가져온다.
정원을 생성한다.
x축과 y축 반지름 값을 설정해 타원을 생성한다.
삽입될 직사각형을 정의한다.
다각형을 생성한다.
사각형을 생성하는 함수이다.
자유로운 패스를 생성한다.
Modules | ||
---|---|---|
Module Name | Status | Summary |
Motion Path Module Level 1 | Last review date: 2023-2-11 |