인라인 SVG가 상위 컨테이너에 비례하여 확장되도록 하려면 어떻게 해야 합니까?

상위 컨테이너에 비례하여 인라인 SVG 크기 조정

상위 컨테이너에 비례하여 인라인 SVG 크기를 조정하는 것은 SVG 크기를 동적으로 조정하는 편리한 방법입니다. 콘텐츠. 이는 HTML 요소 내에 SVG 그래픽을 포함하고 적절하게 크기가 조정되는지 확인해야 할 때 바람직합니다. 이를 달성하는 방법은 다음과 같습니다.

<svg viewBox="0 0 100 50">
  <polygon fill="red" points="0,0 100,0 50,50" />
</svg>

이 예에서 SVG 요소의 너비는 100이고 높이는 viewBox 속성에 정의된 대로 50입니다. 다각형 요소는 SVG의 전체 너비와 높이에 걸쳐 있는 삼각형을 나타냅니다.

viewBox 속성은 SVG 콘텐츠의 좌표를 지정합니다. 이 경우 좌표 범위는 가로로 0~100, 세로로 0~50입니다. CSS를 사용하여 SVG 요소의 크기를 조정하더라도 삼각형은 항상 전체 viewBox 영역을 채웁니다.

svg {
  width: 300px; /* Can be any value */
  height: auto; /* Automatically scales height */
}

SVG 요소의 너비를 설정하면 포함 요소의 원하는 크기를 지정할 수 있습니다. 높이는 SVG의 종횡비를 유지하기 위해 자동으로 조정되어 삼각형의 크기가 비례적으로 유지됩니다.

이 접근 방식을 사용하면 HTML 요소 내에 SVG를 삽입하고 외부 파일을 사용하거나 스타일을 희생하지 않고도 SVG의 크기를 동적으로 제어할 수 있습니다. 옵션을 선택하세요.

위 내용은 인라인 SVG가 상위 컨테이너에 비례하여 확장되도록 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!