svg 내부 요소들 center 정렬하기
6392
작성한 질문수 2
안녕하세요!
강의 잘보고 있습니다.
예제를 조금 수정해서 이것저것 바꿔보고 있는데
혹시 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
SVG 내부의 요소들은 일반 HTML 요소들과 달리 x, y 좌표를 기준으로 위치를 잡기 때문에
일반적인 CSS 정렬 방식으로 제어는 안되고요,
크기 표시 방식에 따라 viewBox나 width, height의 센터로 직접 잡아줘야합니다.
혹시 더 편하고 좋은 방법을 발견하시면 알려주세요 :)
svg 직접 그리기
0
59
1
SVG 파일 CSS 애니메이션
0
215
1
곡선에 따라 글자쓰기에서 path 대신 circle은 안되나요?
0
285
1
선생님 질문 있습니다! svg 태그에 object-fit: cover; 같은 속성을 적용하기는 어려울까요?
0
585
1
atom 서비스 종료, emmet 설치안됨
0
1427
1
SVG 태그 중 foreignObject 관련하여 질문드립니다.
0
1565
1
마스크가 안돼요..
0
431
2
강의 노션
0
404
1
강의 노션
0
342
1
마스크 2에서 배경으로 깔린 패턴 애니메이션이 멈춰있는 현상
1
239
1
path 를 x ,y로 이동
0
287
1
같은 페이지에 같은 svg 아이콘을 사용할 경우 id 값이 동일해도 되나요?
0
363
1
마스크2 돋보기 질문
0
391
1
압축에 관하여
0
281
1
svg 강의 스트로크 편 구현 에서 제가 적용하면 안되는게 있어요
0
418
2
패스 강의 관련 태그 질문 드립니다 ㅠ.ㅠ
0
515
1
글씨 깨짐
0
434
1
smil 무한반복 질문
0
236
1
SMIL 애니메이션 중복 관련 질문드립니다. ( + 융의 땅 관련 질문 추가...)
0
335
1
class name 정의 하실때 bem 방법 사용하시나요??
0
332
1
마스크 2 에서 질문있습니다.
0
265
1
path로 그린 svg 화면 꽉채우기
0
883
1
svg 파일 불러오기
0
369
1
svg 태그 질문!
0
235
1