'SVG'뷰 박스 (HTML) 사용을위한 웹 디자인 가이드
Viewbox는 SVG 모양을 만들 때 일반적으로 사용되는 속성입니다. 문서를 캔버스로 생각하면보기 상자는 사용자가 보려는 캔버스의 일부입니다. 페이지가 전체 컴퓨터 화면을 덮을 수도 있지만 그림은 전체의 1/3에만있을 수 있습니다.
Viewbox를 사용하면 파서에게 세 번째로 확대하도록 지시 할 수 있습니다. 그것은 여분의 공백을 제거합니다. 이미지를 자르기위한 가상 접근 방식으로 뷰 박스를 생각해보십시오.
그것 없이는 그래픽이 실제 크기의 1/3로 나타날 것입니다.
뷰 박스 값
이미지를 자르려면 그림에서 자르도록 포인트를 만들어야합니다. 뷰 박스 속성을 사용할 때도 마찬가지입니다. viewbox의 값 설정은 다음과 같습니다.
- minx - 시작 x 좌표
- 미니 - 시작 y 좌표
- width - 뷰 박스의 폭
- 높이 -보기 상자의 높이
보기 상자 값의 구문은 다음과 같습니다.
viewBox = "0 0 200 150"
보기 상자의 너비와 높이를 SVG 문서에 설정 한 너비와 높이와 혼동하지 마십시오. SVG 파일을 만들 때 가장 먼저 설정하는 값 중 하나는 문서의 너비와 높이입니다. 문서는 캔버스입니다. 뷰 상자는 전체 캔버스 또는 그 일부만을 커버 할 수 있습니다.
이보기 상자는 전체 페이지를 포함합니다.
이보기 상자는 오른쪽 상단에서 시작하는 페이지의 절반을 덮습니다.
또한 모양에 높이 및 너비 할당이 있습니다.
이 페이지는 800x400 픽셀의 문서로, 오른쪽 상단에서 시작하여 페이지의 절반을 확장하는 뷰 박스가 있습니다. 모양은보기 상자의 오른쪽 상단 모서리에서 시작하여 왼쪽으로 100 픽셀, 아래쪽으로 50 픽셀 이동하는 사각형입니다.
왜 Viewbox를 설정해야합니까?
SVG는 단순히 모양을 그리는 것 이상을 수행합니다. 그림자 효과를 위해 하나의 그림을 다른 그림 위에 만들 수 있습니다. 한 방향으로 기울어 지도록 모양을 변형 할 수 있습니다. 고급 필터의 경우보기 상자 속성을 이해하고 사용해야합니다.