svg preserveAspectRatio

svg 파일은 비율이 있어서 화면에 가득차게 연출하면 화면의 일부가 잘린다.
이때 aspectRatio를 어떻게 할 것인지 설정을 바꾸어 어떤부분을 잘리게 해서 화면에 보여줄지 설정할 수 있다.

 

preserveAspectRatio: 'xMidYMin slice',

이 경우 x축 중앙에 맞추고, Y축은 위쪽이 보이도록 ( Y축의 0값 부분이 잘리도록) 하는 설정이다 

 

현재 lottie file을 사용해서 개발하고 있는데 rendererSetting에서 아래와 같이 설정해 줄 수 있다.

rendererSettings: {
  preserveAspectRatio: 'xMidYMin slice',
},

 

 

xMaxYMin slice 해주면 우측 위 방향의 프레임을 보존하는 형태로 잘린다.