[SVG] Q. 도형 애니메이션 기준점이 이상해요.

SVG는 모든 기준점이 좌측 상단을 기준으로 하고 있다.

그렇기 때문에 기존에 알고 있는 HTML과 CSS를 기준으로 하면 생각한 것과 결과가 다르다.

 

그렇다면 어떻게 기준점을 바꿔줘야 할까?

SVG의 기본값을 살펴보면 좌측 상단으로 설정된 것을 알 수 있다.

transform-origin: center;

transform-origin의 값을 center로 설정함으로써 중앙으로 배치 할 수 있다.

---

See the Pen [SVG] Q. 도형 애니메이션 기준점이 이상해요. by mill (@millfeel) on CodePen.

---

[공부 좌표]

SVG마스터 - CSS 적용하기1