SVG를 <div>로 감쌌을 때 height가 1~2px 정도 늘어나는 이유는 SVG가 기본적으로 인라인 요소로 취급되기 때문입니다. 이로 인해 인라인 요소의 특성인 베이스라인(baseline)과 관련된 여백이 추가될 수 있습니다. 이를 해결하려면 SVG를 블록 요소로 변환하거나, 부모 <div>의 스타일을 조정하여 이러한 여백을 제거할 수 있습니다.
다음은 이를 해결하는 몇 가지 방법입니다:
방법 1: SVG를 블록 요소로 설정
SVG를 블록 요소로 설정하여 베이스라인 여백을 제거할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Example</title>
<style>
.svg-container {
display: block;
}
svg {
display: block;
}
</style>
</head>
<body>
<div class="svg-container">
<svg width="100" height="100" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19 8L12 15L19 22" stroke="#8F96A1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</body>
</html>방법 2: 부모 <div>의 라인 높이 설정
부모 <div>의 line-height를 0으로 설정하여 추가 여백을 제거할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Example</title>
<style>
.svg-container {
line-height: 0;
}
</style>
</head>
<body>
<div class="svg-container">
<svg width="100" height="100" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19 8L12 15L19 22" stroke="#8F96A1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</body>
</html>방법 3: vertical-align 속성 설정
SVG 요소의 vertical-align 속성을 middle이나 top으로 설정하여 여백을 제거할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Example</title>
<style>
svg {
vertical-align: top; /* or middle */
}
</style>
</head>
<body>
<div class="svg-container">
<svg width="100" height="100" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19 8L12 15L19 22" stroke="#8F96A1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</body>
</html>위의 방법 중 하나를 사용하여 SVG 요소 주위에 생기는 추가 여백을 제거할 수 있습니다. 가장 일반적인 해결책은 SVG를 블록 요소로 설정하는 것입니다.
'web > 기타' 카테고리의 다른 글
| npm EACCES permissions errors (0) | 2024.11.09 |
|---|---|
| npm에서 yarn berry로 (0) | 2022.11.09 |
| [Vue] vue-fragment 사용 시 발생하는 DOM Exception 해결 (0) | 2022.02.28 |
댓글