IE9에서 내 SVG 크기가 잘못 조정되지만 일부만 표시되는 이유는 무엇입니까?

특정 이미지에 대해 IE9에서 SVG 비율이 왜곡됨

img 요소 내에서 SVG를 사용할 때 예기치 않은 크기 조정 문제가 발생할 수 있습니다. Internet Explorer 9에서는 특정 SVG의 크기가 잘못 조정되어 원래 비율을 유지하지 못할 수 있습니다. 이는 CSS를 통해 최대 높이를 지정했음에도 불구하고 발생할 수 있습니다.

경로와 다각형으로 구성된 SVG를 사용할 때 불일치가 발생합니다. 예를 들어, 질문에 언급된 "crocs.svg" 이미지는 올바르게 확장되지 않는 반면 "groovy.svg" 이미지는 올바르게 확장됩니다.

해결책: ViewBox를 확인하고 요소 너비/높이 속성을 생략하세요

이 문제를 해결하고 브라우저 전체에서 일관된 크기 조정을 보장하려면 SVG 요소 내에 항상 viewBox 속성을 지정하는 것이 좋습니다. 그러나 너비 및 높이 속성은 비워두세요.

이렇게 하면 SVG의 크기를 명시적으로 정의하고 브라우저가 이에 따라 CSS max-height 속성을 해석할 수 있습니다. 다양한 브라우저에서 보다 일관된 크기 조정을 보장합니다.

더 자세한 내용을 알아보려면 이 테스트 페이지: [테스트 페이지 링크]를 참조하세요. 이 페이지에서는 CSS 너비 및 높이 사양과 함께 SVG 속성의 다양한 예를 제공합니다. 다양한 브라우저의 크기 조정을 비교하여 이러한 속성이 SVG 렌더링에 미치는 영향을 관찰할 수 있습니다.

위 내용은 IE9에서 내 SVG 크기가 잘못 조정되지만 일부만 표시되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!