svg 내부 요소들 center 정렬하기

미해결질문
Mingyu Jeon 프로필

안녕하세요!

강의 잘보고 있습니다.

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

혹시 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 속성을 이용해서 적용해볼까 하는데

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

 

감사합니다 :)

1분코딩 프로필
1분코딩 2019.08.06

SVG 내부의 요소들은 일반 HTML 요소들과 달리 x, y 좌표를 기준으로 위치를 잡기 때문에

일반적인 CSS 정렬 방식으로 제어는 안되고요,

크기 표시 방식에 따라 viewBox나 width, height의 센터로 직접 잡아줘야합니다.

혹시 더 편하고 좋은 방법을 발견하시면 알려주세요 :)

지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스