offset-path 속성

CSS의 offset-path 속성은 애니메이션 중에 요소가 따라갈 이동 경로를 정의합니다.

이 속성은 처음에 motion-path로 시작되었습니다. 이 속성을 포함한 모든 관련 motion-* 속성들은 명세(spec)에 따라 offset-*로 이름이 변경되고 있습니다. 저희는 이 알마낙(almanac)에서도 이름을 변경하고 있습니다. 만약 지금 바로 사용하고 싶다면, 두 가지 구문(syntax)을 모두 사용하는 것이 가장 좋습니다.

다음은 SVG 경로(path) 구문을 사용한 예시입니다:

.thing-that-moves {
  /* "이전" 구문. ~2015년 10월부터 Blink 브라우저에서 사용 가능 */
  motion-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0");
...

이 속성 자체는 애니메이션화할 수 있는 것이 아니라, 애니메이션을 위한 경로를 정의하는 것입니다. 우리는 애니메이션을 만들기 위해 offset-distance 속성을 사용합니다. 다음은 @keyframes 애니메이션을 사용하여 motion-offset을 애니메이션화하는 간단한 예시입니다:

.thing-that-moves {
  offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0');
  animation: move 3s linear infinite;
...

CodePen Embed Fallback

이 데모에서 주황색 원은 CSS에서 설정한 offset-path를 따라 애니메이션화되고 있습니다. 우리는 실제로 동일한 path() 데이터를 사용하여 SVG에 해당 경로를 그렸지만, 움직임을 구현하기 위해 반드시 그럴 필요는 없습니다.

만약 어떤 SVG 편집 소프트웨어에서 다음과 같이 독특한 경로를 그렸다고 가정해 봅시다:

우리는 다음과 같은 경로를 찾게 될 것입니다:

우리가 찾는 것은 d 속성(attribute) 값이며, 이를 CSS로 바로 옮겨 offset-path로 사용할 수 있습니다:

CodePen Embed Fallback

경로 구문에서 단위가 없는 값들에 주목하세요. 만약 SVG 내의 요소에 CSS를 적용한다면, 해당 좌표 값들은 해당 SVG의 viewBox 내에 설정된 좌표계를 사용하게 됩니다. 만약 다른 HTML 요소에 움직임을 적용한다면, 해당 값들은 픽셀(pixels) 단위가 됩니다.

또한 요소가 자동으로 회전하여 마치 앞을 향하는 것처럼 보이도록 하기 위해 손가락이 가리키는 그래픽을 사용했다는 점에 유의하세요. 이는 offset-rotate를 통해 제어할 수 있습니다:

.mover {
  offset-rotate: auto; /* 기본값, 앞을 향함 */
  offset-rotate: reverse; /* 뒤를 향함 */
...

값 (Values)

우리가 파악한 바로는, offset-path에서 실제로 작동하는 값은 path()와 none뿐입니다.

offset-path 속성은 원래 다음과 같은 모든 값을 허용하도록 설계되었습니다.

[path()](https://css-tricks.com/almanac/functions/p/path/): SVG 좌표 구문(syntax)으로 경로를 지정합니다.
[shape()](https://css-tricks.com/almanac/functions/s/shape/): SVG 대신 CSS 방식의 명령어로 경로를 생성합니다.
[url()](https://css-tricks.com/almanac/functions/u/url/): 이동 경로로 사용할 SVG 요소의 ID를 참조합니다.
none: 오프셋 경로를 전혀 지정하지 않습니다.
도형 함수 (Shape functions): CSS Shapes 명세(specification)에 따라 도형을 지정하는 CSS 함수 세트로, 다음을 포함합니다:
- [circle()](https://css-tricks.com/almanac/functions/c/circle/)
- [ellipse()](https://css-tricks.com/almanac/functions/e/ellipse/)
- [inset()](https://css-tricks.com/almanac/functions/i/inset/)
- [path()](https://css-tricks.com/almanac/functions/p/path/)
- [polygon()](https://css-tricks.com/almanac/functions/p/polygon/)
- [shape()](https://css-tricks.com/almanac/functions/s/shape/)
- [xyzh()](https://css-tricks.com/almanac/functions/x/xywh/)

다음은 몇 가지 테스트입니다:

CodePen Embed Fallback

SVG 요소가 url()을 통해 동일한 SVG에 정의된 경로를 참조하도록 설정하는 것조차 작동하지 않는 것으로 보입니다.

Web Animations API를 사용하는 경우

Dan Wilson은 Future Use: CSS Motion Paths에서 이 내용의 일부를 탐구했습니다. Web Animations API를 통해 JavaScript에서도 이 모든 동일한 기능에 접근할 수 있습니다. 예를 들어, CSS에서 offset-path를 정의했다면, JavaScript를 통해 여전히 애니메이션을 제어할 수 있습니다:

CodePen Embed Fallback

추가 예시

주의하세요! 이 중 많은 예시가 motion-* 명명 규칙에서 offset-*으로 변경되기 전에 작성되었습니다. 원하신다면 이를 수정하는 것은 매우 쉬울 것입니다.

CodePen Embed Fallback

브라우저 지원 (Browser support)

다른 방법이 있나요?

저희의 Sarah Drasner는 SVG의 네이티브 애니메이션 방식인 SMIL에 대해, 그리고 animateMotion이 SVG 경로를 따라 객체를 애니메이션화하는 데 어떻게 사용되는지에 대해 작성했습니다. 형태는 다음과 같습니다:

GreenSock 또한 다른 방법입니다. Sarah는 GSAP + SVG for Power Users: Motion Along A Path (SVG 필수 아님)에서 이에 대해 이야기합니다. 예시:

CodePen Embed Fallback

offset-path 속성

요약

핵심 포인트

값 (Values)

Web Animations API를 사용하는 경우

추가 예시

브라우저 지원 (Browser support)

다른 방법이 있나요?

관련 속성 (Related Properties)

clip-path

offset-anchor

offset-distance

offset-rotate

circle()

ellipse()

inset()

path()

polygon()

shape()

url()

댓글