Internet Explorer 9에서 SVG 이미지 비율이 다른 이유는 무엇입니까?

Internet Explorer 9의 이미지 비율 배율 문제

CSS를 사용하여 최대 높이를 지정하는 경우에도 SVG 이미지가 Internet Explorer 9에서 예상치 못한 비율로 표시되는 경우가 많습니다. 이러한 불일치는 다양한 SVG 파일의 동작을 비교할 때 더욱 분명해집니다.

예를 들어 CSS에 정의된 기본 크기가 200x200px이고 최대 높이가 30px인 SVG 이미지가 있다고 가정해 보겠습니다.

<code class="css">img {
    max-height: 30px;
}</code>

대부분의 브라우저에서 이 SVG 이미지는 높이 30픽셀에 비례하여 크기가 조정됩니다. 그러나 Internet Explorer 9에서는 대신 30x200픽셀로 표시될 수 있습니다.

이 문제는 사용된 SVG 요소 유형과 관련된 것으로 보입니다. 문제가 있는 SVG에서 이미지는 다각형으로 구성되는 반면, 올바르게 크기 조정되는 SVG에서는 경로로 구성됩니다.

브라우저 전체에서 일관된 크기 조정을 보장하려면 항상 viewBox를 지정하고 사용하지 않는 것이 좋습니다. SVG 요소의 너비 및 높이 속성. 이 방법을 따르면 Internet Explorer 9 및 기타 브라우저에서 SVG 이미지의 호환성을 향상시킬 수 있습니다.

위 내용은 Internet Explorer 9에서 SVG 이미지 비율이 다른 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!