HTML5에서 SVG 이미지를 사용할 때 Viewbox 속성 사용의 심층 구문 분석

이 기사는 주로 HTML5에서 SVG 이미지를 사용할 때 뷰 박스 속성의 사용을 소개합니다. 필요한 친구는 Viewbox의 매개 변수를 빠르게 이해하기 위해 그것을 참조 할 수 있습니다.

ViewBox 속성은 사용자 SVG 이미지의 좌표계의 원점과 크기를 지정하는 데 사용됩니다. SVG에 그려진 모든 컨텐츠는이 좌표계와 관련하여 수행됩니다. SVG 캔버스는 모든 방향으로 무한히 확장 되므로이 좌표계의 경계 외부에 그래픽을 그릴 수도 있습니다. 그러나 SVG 창에 비해 배치 된 이러한 그래픽은 사용자 좌표 시스템의 위치에 의해 제어 될 수 있습니다.

ViewBox 속성은 4 개의 매개 변수를 사용하여 좌표계 원점의 위치와 크기 인 XY 폭 높이를 지정합니다. 초기의 경우,이 좌표계는 초기화 된 창 좌표계 (SVG 이미지의 너비와 높이에 의해 결정됨)와 동일하며, 그 원점은 (0, 0), 즉 SVG의 왼쪽 상단 모서리에 있습니다.

두 매개 변수 x 및 y의 값을 변경함으로써 원점의 위치를 조정할 수 있습니다. 폭과 높이 값을 변경하여 좌표계의 크기를 변경하십시오. 뷰 박스 속성을 사용하여 SVG 캔버스를 확장하거나 자르는 데 도움이됩니다. 예제로 읽으십시오.

중요 :이 기사에서는 SVG 창 내에서 Viewbox의 기본 동작 (스케일 및 위치)을 변경하지 않습니다. 속성의 기본 동작에 따라 뷰 박스의 내용이 가능한 한 창에 완전히 포함 된 다음 중앙에 배치되기 때문입니다. 그러나 Preserveaspectratio 속성을 사용하면 뷰 박스의 크기와 위치를 자유롭게 변경할 수 있지만이 기사에서는 필요한 기술이 아니므로 여기서도 깊이 설명하지는 않습니다.

viewbox를 사용하여 SVG에 SVG를 사용하십시오.

얼마 전, 내 고객 중 한 명이 그의 웹 사이트의 SVG 아바타를 다른 화면 크기에 따라 다른 크기로 설정하도록 요청했기 때문에 작은 부분 만 작은 화면에서 볼 수 있도록 중간 화면 크기에서 큰 부분을 볼 수 있으며 큰 화면에서 전체 내용을 볼 수 있습니다. 당시 내 마음에 들어온 첫 번째 아이디어는 그의 요구 사항은 뷰 박스 속성을 사용하여 SVG 이미지를 자르고 다른 화면 크기를 기반으로보고 싶은 이미지의 특정 부분을 표시하는 것이 었습니다.

SVG 좌표계의 크기와 원점을 변경함으로써 SVG를 자르고 창에 표시하려는 컨텐츠의 일부를 표시 할 수 있습니다.

구현 방법을 봅시다.

다음과 같이이 완전한 SVG 이미지를 가지고 있다고 가정하고 작은 화면 크기로 자르고 싶습니다. 이 이미지는 Freepik이 디자인 한 무료 주택 벡터로, Creative Commons Adatribution 3.0 Unported 계약에 따라 라이센스가 부여됩니다. 단순화를 위해 먼저 이미지가 중소형 화면에 표시하기 위해 자르는 내용과 아래 그림과 같이 큰 화면에 표시되는 전체 내용에 관한 것이라고 가정하겠습니다.

왼쪽의 그림은 ViewBox 속성을 사용하여 자르는 완전한 그림이며 오른쪽의 그림은 작은 화면에 표시하려는 영역입니다.

이제 뷰 박스 속성의 값을 변경하여 SVG를 자르십시오. 고려해야 할 사항이 몇 가지 있습니다. 나중에 그것에 대해 이야기 할 것입니다. 그러나 먼저 위의 그림에서 가상 상자 사각형 영역의 내용과 일치하도록 좌표계를 변경해야합니다. , 시스템의 원점과 너비와 높이의 값을 조정함으로써 초기 0 800 800 매개 변수 값을 변경할 수 있습니다.

그러나 새로운 좌표와 새로운 차원을 어떻게 알 수 있습니까? 요점은 많은 반복 실험과 오류를 거치지 않는 것입니다.

여러 가지 방법이 있습니다. 우리는 이미 그래픽 편집기 (내 예제가 AI를 사용)에 있기 때문에 편집기 패널을 사용하여 요소의 위치와 크기를 얻을 수 있습니다.

이 점선 직사각형 상자를 그린 작은 화면에 표시하고 싶은 것을 나타내는 것 외에도 다른 이유는 사각형의 위치와 치수를 가져 와서 뷰 박스의 값으로 사용할 수 있기 때문입니다. AI의 변환 패널 (아래 그림)을 사용하여 필요한 값을 얻었습니다. 사각형을 선택하고 오른쪽 상단 코너의 변환 링크를 클릭하면 필요한 x, y, 너비 및 높이 값을 포함하여 아래 그림에 표시된 패널을 가져옵니다.

이 AI의 변환 패널은 선택한 사각형의 위치와 크기를 얻는 데 사용될 수 있습니다.

위의 값이 정수가 아니라는 것을 알 수 있으므로 수동으로 수정해야합니다. 위의 정보를 바탕으로 ViewBox 값을 0 200 512 512로 변경합니다.

새 뷰 박스의 종횡비는 SVG 창 (모두 사각형)의 종횡비와 동일하기 때문에 뷰 박스의 내용이 확장되고 선택된 영역 만 창에 표시됩니다. ViewBox의 값을 변경 한 후 결과는 그림에 표시된 것과 같습니다.

새로 자른 SVG. 뷰 박스 속성이 창에서 볼 수 있도록 지정하는 위치 만. 파란색 테두리는 SVG의 창을 나타냅니다.

이 시점에서 해결해야 할 문제가 있습니다.

자른 영역 (예 : 뷰 박스)의 종횡비가 SVG 창의 종횡비 인 경우 어떻게됩니까?

이 경우 상당한 오버플로가 나타납니다. 명백한 오버플로, 나는 SVG 창 경계를 넘어 확장이 아니라 Viewbox로 정의 된 새로운 사용자 좌표 시스템에 대한 오버플로를 의미합니다. 다음 그림은 해당 설명을 제공합니다.

ViewBox의 종횡비가 ViewBox의 종횡비와 다른 경우 SVG의 내용이 사용자 좌표 시스템이 오버플로 표시되며 결과는 다음과 같습니다.

검은 색 테두리는 새로운 사용자 좌표 시스템을 나타내고 파란색 테두리는 SVG 창입니다.

위의 오른쪽 이미지의 검은 색 테두리는 뷰 박스로 정의 된 영역입니다. 창에서 뷰 박스의 기본 동작에 따르면, 콘텐츠가 창에 포함되도록 가능한 한 중앙에 중앙에 확대되고 확대됩니다 (파란색 테두리).

SVG Canvas는 모든 방향으로 개념적으로 무한대에 확장되므로 사용자 좌표 시스템의 경계 외부에 그래픽을 그릴 수 있으며 위의 그림과 같이 컨텐츠가 직접 오버플로 및 이동합니다.

SVG 창 (SVG의 너비 및 높이)의 종횡비를 변경하여 뷰 박스의 종횡비에 맞게 조정되면 뷰 박스의 줌이 이전 예제에서와 같이 창에 적응되므로 오버플로가 표시되지 않습니다.

그러나 경우에 따라 SVG의 종횡비를 전혀 변경하지 않거나 원하지 않을 수도 있습니다. 예를 들어, 페이지에 이미지를 표시하기 위해 SVG Sprite를 이미지 세트로 사용하는 경우. 대부분의 경우 이미지에는 고정 된 종횡비가 있으며 이미지의 크기를 변경하고 싶지는 않습니다. 또는 아이콘 시스템을 내장하고 모든 아이콘이 동시에 동시에 동일한 크기를 유지하기를 원할 수도 있습니다.

과잉을 잘라 내려면 (예 : 스프라이트의 다른 아이콘이 창에 표시됨) <clippath>를 사용하여 초과를 잘라낼 수 있습니다. 클리핑 경로는 전체 뷰 박스 영역을 덮고있는 <ect> 요소 일 수 있으며 해당 요소를 루트 SVG에 적용 할 수 있습니다.

그러나 기억해야 할 또 다른 사항이 있습니다. <ect>의 x 및 y 속성이 viewbox와 일치하는지 확인하십시오. REST가 원래/초기화 시스템의 원점에 상대적으로 위치하지 않는 한 SVG의 내용도 불확실합니다.