svg 내부 요소들 center 정렬하기

안녕하세요!

강의 잘보고 있습니다.

예제를 조금 수정해서 이것저것 바꿔보고 있는데

혹시 svg 안의 요소들을 center 정렬하는 방법이 따로 있을까요?

제가 시도해본 방법은 

1.

svg안에 class를 주고,
display: flex; justify-content: center; align-items: center;

2. svg안쪽에서 가장 최상위 요소에,

top: 0; left:0; bottom: 0; right: 0; margin: auto;

그런데 위의 두 방식은 전혀 동작하지 않더라구요.

그래서 지금 preserveAspectRatio 속성을 이용해서 적용해볼까 하는데

혹시 간단한 방법이 있을까요?

감사합니다 :)