IE9에서 내 SVG 이미지가 왜곡되는 이유는 무엇입니까? ViewBox의 역할과 일관된 크기 조정.

IE9의 SVG 이미지 비율과 ViewBox의 역할

요소를 사용하면 크기 조정 시 이미지의 자연스러운 비율이 유지될 것으로 예상됩니다. 그러나 IE9에서는 이 동작이 SVG 파일의 구조에 따라 달라질 수 있습니다.

문제:
특정 SVG, 특히 다각형으로 구성된 SVG는 IE9에서 비례적으로 크기가 조정되지 않습니다. 최대 높이 CSS 속성이 설정된 요소입니다. 이로 인해 이미지가 늘어나거나 왜곡됩니다.

이유:
다각형과 경로가 포함된 SVG 간의 크기 조정 동작의 차이는 SVG 파일.

해결책:
브라우저 전체에서 일관된 크기 조정을 보장하려면 항상 SVG 파일 내에 viewBox 속성을 지정하는 것이 좋습니다. 이 속성은 SVG 이미지의 좌표 공간을 정의합니다.

예:
다음 코드는 이 솔루션을 보여줍니다.

<code class="xml"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<polygon points="..." />
</svg></code>

viewBox, IE9 및 기타 브라우저는 다각형이나 경로의 존재 여부에 관계없이 종횡비를 유지하면서 SVG 이미지의 크기를 일관되게 조정합니다.

위 내용은 IE9에서 내 SVG 이미지가 왜곡되는 이유는 무엇입니까? ViewBox의 역할과 일관된 크기 조정.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!