`viewBox`, `width` 및 `height`를 사용하여 상위 컨테이너에 맞게 인라인 SVG의 크기를 어떻게 조정합니까?

상위 컨테이너를 사용하여 인라인 SVG 크기 조정

인라인 SVG(Scalable Vector Graphics) 요소로 작업할 때 크기에 맞게 SVG 크기를 조정해야 하는 경우가 종종 있습니다. 상위 컨테이너입니다. 외부 SVG 파일을 참조하여 크기를 조정할 수 있지만 이 접근 방식은 CSS를 사용하여 SVG 스타일을 지정하는 기능을 제한할 수 있습니다. 따라서 더 바람직한 해결책은 인라인 SVG의 크기를 직접 조정하는 것입니다.

viewBox로 이미지 좌표 정의 및 너비/높이로 크기 조정

SVG 이미지의 내부 좌표를 정의하고 크기 조정 방법을 결정하려면 , 다음 속성을 사용합니다.

• viewBox: 정의 자체 좌표계에 있는 이미지의 경계 상자.
• 너비: 포함 페이지에 상대적인 단위로 표시되는 SVG의 너비.
• 높이: 포함된 페이지를 기준으로 한 SVG의 높이(단위:

예를 들어, 다음 인라인을 고려하세요) 빨간색 삼각형이 있는 SVG:

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

여기에는 다음이 있습니다.

• viewBox(0, 0, 20, 10): SVG에 직사각형 경계 상자가 있음을 지정합니다. 너비는 20단위, 높이는 10단위입니다.
• 너비(10): SVG가 다음과 같아야 함을 지정합니다. 포함 페이지를 기준으로 너비가 10단위입니다.
• 높이(20): SVG가 포함 페이지를 기준으로 높이가 20단위여야 함을 지정합니다.

이 SVG는 너비 10픽셀, 높이 20픽셀의 빨간색 삼각형.

위 내용은 `viewBox`, `width` 및 `height`를 사용하여 상위 컨테이너에 맞게 인라인 SVG의 크기를 어떻게 조정합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!