상위 컨테이너를 사용하여 인라인 SVG 스케일을 만들려면 어떻게 해야 합니까?

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

인라인 SVG 요소를 HTML 코드에 통합하면 CSS로 스타일을 지정할 수 있다는 이점이 있습니다. 그러나 이러한 SVG 요소의 크기를 상위 컨테이너의 크기와 일치시키는 것은 어려울 수 있습니다.

해결책

상위 컨테이너를 사용하여 인라인 SVG의 크기를 조정하려면 다음을 수행하세요. 너비 및 높이 속성과 함께 viewBox 속성을 활용하는 데 필요합니다.

1. viewBox 속성: 이 속성은 자체 좌표계 내에서 SVG 이미지의 경계 상자를 정의합니다. SVG 이미지의 종횡비와 초기 크기를 설정합니다. 이 속성을 설정하면 확장된 크기와 관계없이 SVG 이미지 내의 좌표를 지정할 수 있습니다.
2. 너비 및 높이 속성: 이러한 속성은 SVG 이미지 내에서 SVG 요소의 너비와 높이를 지정합니다. 포함하는 페이지입니다. 페이지에 나타나는 SVG 이미지의 크기를 제어합니다. 컨테이너 크기를 기준으로 이러한 속성을 설정하면(예: 백분율 사용) SVG 이미지의 크기를 비례적으로 조정할 수 있습니다.

예를 들어 다음 코드를 고려해 보세요.

<svg viewBox="0 0 123 456" width="100%" height="100%">
  <polygon fill="red" stroke-width="0" points="0,10 20,10 10,0" />
</svg>

이 예에서는 기본 크기가 123px x 456px인 SVG 이미지가 전체 컨테이너를 채우도록 크기가 조정됩니다. viewBox 속성은 SVG 이미지 자체 내의 다각형 좌표를 정의하는 반면, width 및 height 속성은 SVG 이미지를 컨테이너 크기에 맞게 조정합니다. 결과적으로 다각형은 컨테이너 내에서 너비가 100%인 빨간색 삼각형으로 렌더링됩니다.

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