종횡비를 유지하면서 상위 컨테이너에 맞게 인라인 SVG의 크기를 어떻게 조정합니까?

상위 컨테이너에 맞게 인라인 SVG 크기 조정

인라인 SVG는 HTML 문서에 직접 벡터 그래픽을 추가할 수 있는 유연성을 제공합니다. 그러나 가로 세로 비율을 유지하면서 상위 컨테이너의 크기에 맞게 크기를 조정하는 것은 어려울 수 있습니다. viewBox 속성을 사용하여 이를 달성하는 방법은 다음과 같습니다.

인라인 SVG 크기를 만들기 위해 SVG 요소에 viewBox 속성을 사용합니다. 이 속성은 자체 좌표계 내에서 이미지의 경계 상자를 정의합니다. 그런 다음 포함 페이지를 기준으로 하는 너비 및 높이 속성을 사용하여 원하는 너비와 높이를 지정합니다.

10픽셀 x 20픽셀 삼각형을 표시하는 다음 예를 고려하세요.

<svg viewBox="0 0 20 10">
    <polygon fill="red" stroke-width="0"
             points="0,10 20,10 10,0" />
</svg>

이 SVG는 크기에 관계없이 주어진 컨테이너 내에서 10px x 20px 삼각형으로 렌더링됩니다. viewBox 속성(0 0 20 10)은 이미지의 좌표계를 정의하며 (0,0)은 왼쪽 상단 모서리이고 (20,10)은 오른쪽 하단 모서리입니다. 너비 및 높이 속성(예제에는 표시되지 않음)을 지정하여 이미지 비율을 유지하면서 컨테이너를 기준으로 원하는 크기로 이미지 크기를 조정합니다.

위 내용은 종횡비를 유지하면서 상위 컨테이너에 맞게 인라인 SVG의 크기를 어떻게 조정합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!