✍️ viewport width height 과 viewbox width height의 개념을 정확히 몰라서 엄청 헤매었던 기억이 있다. (의도 하지 않았는데 반만 보이고 작아지고.... )그 때 고생했던 기억으로 정리해보았다.
<style>
#sample_svg { background-color: blue;}
</style>
<svg id="sample_svg" width="100" height="100" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
➡️ 현미경으로 그림을 관찰한다고 하였을 때, 우리가 눈으로 보는 현미경 구멍의 크기 라고 생각하면 됨.
속성
❗width, height 단위: px
➡️ 현미경으로 그림을 관찰한다고 하였을 때, 렌즈의 배율과 이미지의 위치 조절에 따라 그림이 다르게 보이는 상황과 같다고 생각하면 됨.
<style>
#sample_svg { background-color: blue;}
</style>
<svg id="sample_svg" width="50" height="50">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
속성
viewBox =”[min-x] [min-y] [width] [height]”
❗그려지는 시작점은 왼쪽 상단을 기준으로 함.
❗width, height 단위: 좌표 비율 (단순한 px개념 ❌)
<style>
#sample_svg { background-color: blue;}
</style>
<svg id="sample_svg" width="100" height="100" viewBox=" 0 0 50 50">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<style>
#sample_svg { background-color: blue;}
</style>
<svg id="sample_svg" width="100" height="100" viewBox=" 0 0 200 200">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<style>
#sample_svg { background-color: blue;}
</style>
<svg id="sample_svg" width="100" height="100" viewBox=" 50 50 100 100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>