상위 컨테이너에 맞게 인라인 SVG의 크기를 조정하려면 어떻게 해야 합니까?

인라인 SVG 요소의 크기를 조정하는 방법

특정 시나리오에서 개발자는 인라인 SVG 이미지의 크기를 동적으로 조정하여 크기에 맞게 조정해야 할 수도 있습니다. 상위 컨테이너입니다. 이는 외부 SVG 파일을 참조하지 않고도 달성할 수 있으며 SVG 콘텐츠에 추가 CSS 스타일을 적용할 수 있습니다.

인라인 SVG의 크기를 조정하려면 다음 단계를 따르세요.

1. Viewbox 속성 지정:
   SVG의 viewBox 속성을 사용하여 좌표계 내에서 이미지의 경계 상자를 정의합니다. 요소. 값은 SVG의 왼쪽 상단 모서리와 오른쪽 하단 모서리의 x 및 y 좌표를 나타냅니다.
2. 너비 및 높이 속성 설정:
   너비 및 높이 지정 너비 및 높이 속성을 사용하여 포함 페이지 내에 표시되어야 하는 SVG의 형식입니다. 이러한 값은 SVG가 비례적으로 확장되는 방법을 나타냅니다.

예를 들어 다음 코드는 10x20픽셀 경계 상자 내에서 삼각형을 렌더링한 다음 상위 컨테이너에 맞게 크기가 조정됩니다.

svg {
  border: 1px solid blue;
}

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

확대된 크기와 관계없이 SVG 내의 좌표를 지정하면 이미지가 비율에 관계없이 비율을 유지하고 올바르게 렌더링됩니다. 컨테이너의 크기.

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