SVG
SVG 요소
수색…
뷰 박스
viewBox 속성은 <svg>
요소에 대한 좌표계를 정의합니다. 이렇게하면 각 개별 요소의 위치와 치수를 조정하지 않고도 SVG 그래픽의 크기와 상대적 비율을 쉽게 변경할 수 있습니다.
<!-- stretches a small icon to 60px square -->
<svg viewBox="0 0 16 16" height="60px" width="60px">
<path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
</svg>
해당 코드는 다음과 같습니다.
viewBox가 없으면 다음과 같이 보입니다.
preserveAspectRatio
preserveAspectRatio
는 이미지의 크기를 균일하게 조정해야하는지 여부를 나타내는 특성입니다. 경우이 속성은 작동 <svg>
요소도있다 viewBox
.
기본값은 xMidYMid
이며, 이는 종횡비를 유지하고 경로를 SVG 컨테이너의 가운데에 배치합니다.
<!-- when not included `preserveAspectRatio` defaults to `xMidYMid` -->
<svg viewBox="0 0 16 16" height="60" width="120">
<path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
</svg>
preserveAspectRatio
가 none
으로 설정된 경우 아이콘이 상자에 맞게 늘어납니다.
<svg viewBox="0 0 16 16" height="60" width="120" preserveAspectRatio="none">
<path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
</svg>
preserveAspectRatio
에는 다른 많은 값이 있지만이 두 값은 훨씬 일반적입니다.
preserveAspectRatio - 애트리뷰트 충족 및 슬라이스
preserveAspectRatio
속성은 선택적 매개 변수가 있습니다 meet
| slice
. 기본 동작은 meet
는 폭 또는 뷰 박스의 높이 중 어느 하나를 채울 때까지 x 및 y 차원 모두의 콘텐츠 뻗어있다. 대안 - slice
는 내용의 종횡비를 보존하지만 뷰 박스의 너비와 높이를 모두 채울 때까지 (그래도 viewBox를 오버 플로우하는 내용을 잘라내어) 그래픽의 크기를 조정합니다.
이것은 slice
를 사용하는 예입니다.
<svg viewBox="0 0 16 16" height="60px" width="120px" preserveAspectRatio="xMinYMin slice">
<path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
다음과 같이 렌더링됩니다.
그리고 meet
사용하는 같은 예제
<svg viewBox="0 0 16 16" height="60px" width="120px" preserveAspectRatio="xMinYMin meet">
<path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
</svg>
다음과 같이 렌더링됩니다.
Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow